4
Replies
Hi Guys.
I've been messing around with a CSS based menu that I found online and I have a few questions. Here's a link to the menu. https://codepen.io/uiswarup/full/dyyqaGR
Firstly, how would you go about implementing this menu in an actual web site? The menu is cool but it takes up alot of screen real estate. The menu has to be visible as you move from page to page and I don't see how that happens in this case.
By @VShaneCurtis
It is what it is NOT very usable whilst being impressive. Personally I think it's probably only usable in certain/specific situations like a 1 page website. There's a lot of eye-candy solutions around but a lot of it isnt very user-friendly, its more showcasing than being functional in the real world.
Secondly, I'm having some issues working with a local copy of the code. There is a large amount of CSS contained within style tags on the main page. When I try to move the CSS into it's own file and create a link/reference to the external CSS file it "breaks" the page. I've looked at the CSS for something that would require it to remain inline and I don't see anything. Additionly the images that are displayed for each menu item do not display. I am assuming that it's because I don't have all the source files.
By @VShaneCurtis
You're missing the below 3 files:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-social/5.1.1/bootstrap-social.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
That menu looks more like a proof of concept. "Look at me, look at me! Aren't I awesome?!"
Anyway, that example is not practical or flexible enough for production use. When it comes to menus, LESS is MORE.
How many sitewide menu items do you need for your project? The rule of thumb is that each link should have a target area the size of an adult human finger pad (about 45px in diameter). Anything less is too hard to access from touch screens.
The default navbars in Bootstrap should suffice for most web applications. See the code below.
<!doctype html>
<html lang="en">
<head>
<title>Bootstrap 4.5 Starter Page</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Bootstrap CSS-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<style>
/**Some Custom Styles for Demo Purposes**/
body {
margin:0;
padding-top:10%;
background: url(https://placeimg.com/1500/900/nature) no-repeat center center fixed;
background-size: cover;
}
.container-fluid {
padding-top: 10%;
width:75%;
min-height: 900px;
}
.opacity-3 { background: rgba(0,0,0,0.6)!important; }
</style>
</head>
<body class="pt-5">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="#">Brand/Logo</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Sub-menu 1</a>
<a class="dropdown-item" href="#">Sub-menu 2</a>
<a class="dropdown-item" href="#">Sub-menu 3</a>
</div>
</li>
<li class="nav-item"><a class="nav-link" href="#">Link 2</a></li>
<li class="nav-item"><a class="nav-link" href="#">Link 3</a></li>
<li class="nav-item"><a class="nav-link" href="#">Link 4</a></li>
<li class="nav-item"> <a class="nav-link" href="#">Link 5</a>
</li>
</ul>
</div>
</nav>
<!--MAIN CONTENT-->
<main class="container-fluid">
<div class="row">
<div class="col-md-8 mx-auto opacity-3 text-light mt-5">
<h3 class="m-1 p-4">Bootstrap 4.5 in Dreamweaver</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis molestiae veniam ab doloremque illum amet sint, iure labore magni aspernatur architecto eligendi consectetur hic maxime reprehenderit nesciunt similique saepe odio.</p>
</div>
</div>
</main>
<!--Supporting Scripts-->
<!--First jQuery then Popper then Bootstrap JS-->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
AdChoices