"menu bar"
Bootstrap 3.0.0 Snippet by lovelacezenia

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!Doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>GSO Inventory</title> <link href="./sytle.css" rel="stylesheet" type="text/css"> <script src="./script.js"></script> </head> <div class="container"> <nav class="navbar navbar-inverse"> <div class="navbar-header"> <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".js-navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">GSO Inventory</a> </div> <div class="collapse navbar-collapse js-navbar-collapse"> <ul class="nav navbar-nav"> <li> <a href="#">Dashboard</a></li> <li><a href="#">Inventory</a></li> <li><a href="#">Department</a></li> <li><a href="#">Return</a> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Logs<span class="caret"></span></a> <ul class="dropdown-menu mega-dropdown-menu"> <li> <ul> <li><a href="#">Increase</a></li> <li><a href="#">Decrease</a></li> <li><a href="#">Return</a></li> <li><a href="#">Users</a></li> </ul> </li> </ul> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">account <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="#">About</a></li> <li><a href="#">Settings</a></li> </ul> </li> </ul> </div><!-- /.nav-collapse --> </nav> </div> </html>
body { font-family: 'Open Sans', 'sans-serif'; } .mega-dropdown-menu { padding: 0; width: 10%; box-shadow: none; -webkit-box-shadow: none; } .mega-dropdown-menu > li > ul { padding: 0; margin: 0; } .mega-dropdown-menu > li > ul > li { list-style: none; } .mega-dropdown-menu > li > ul > li > a { display: block; color: #222; padding: 3px 5px; } .mega-dropdown-menu > li ul > li > a:hover, .mega-dropdown-menu > li ul > li > a:focus { text-decoration: none; } .mega-dropdown-menu .dropdown-header { font-size: 18px; color: #ff3546; padding: 5px 60px 5px 5px; line-height: 30px; } .carousel-control { width: 30px; height: 30px; top: -35px; } .left.carousel-control { right: 30px; left: inherit; } .carousel-control .glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right { font-size: 12px; background-color: #fff; line-height: 30px; text-shadow: none; color: #333; border: 1px solid #ddd; }
$(document).ready(function(){ $(".dropdown").hover( function() { $('.dropdown-menu', this).not('.in .dropdown-menu').stop(true,true).slideDown("400"); $(this).toggleClass('open'); }, function() { $('.dropdown-menu', this).not('.in .dropdown-menu').stop(true,true).slideUp("400"); $(this).toggleClass('open'); } ); });

Related: See More

Black Dashboard React
Bootstrap NavBar Menu Dropdowns http://fontenele.github.io/bootstrap-navbar-dropdowns/
Accordian Menu
Bootstrap V4 Side Toggle and Fixed Top Menu (Responsive)

Questions / Comments: