After this tutorial you will be able to create multi level menu bar using HTML, CSS, and jQuery code. This is very easy and simple code to create bootstrap multilevel NavBar.
First include the default bootstrap CSS & JS files. Before start to create multi level menu bar include below CSS and JS code before head tag close. You can include it from a CDN (Content Delivery Network).
|
1 2 3 4 5 6 7 8 |
<!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <!-- Latest compiled JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> |
Copy and paste below JQuery code before head tag closed.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<script type="text/javascript"> $(document).ready(function() { $('.navbar a.dropdown-toggle').on('click', function(e) { var $el = $(this); var $parent = $(this).offsetParent(".dropdown-menu"); $(this).parent("li").toggleClass('open'); if(!$parent.parent().hasClass('nav')) { $el.next().css({"top": $el[0].offsetTop, "left": $parent.outerWidth() - 4}); } $('.nav li.open').not($(this).parents("li")).removeClass("open"); return false; }); }); </script> |
CSS Code
Add below CSS code in style tag.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
body { padding-top: 50px; } .navbar-template { padding: 40px 15px; } @media (min-width: 767px) { .navbar-nav .dropdown-menu .caret { transform: rotate(-90deg); } } |
HTMl Code
Add below HTML code after body tag closed.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 |
<div class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".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="#">NavBar</a> </div> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="https://github.com/fontenele/bootstrap-navbar-dropdowns" target="_blank">GitHub</a></li> <li> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu 1 <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Action [Menu 1.1]</a></li> <li><a href="#">Another action [Menu 1.1]</a></li> <li><a href="#">Something else here [Menu 1.1]</a></li> <li class="divider"></li> <li><a href="#">Separated link [Menu 1.1]</a></li> <li class="divider"></li> <li><a href="#">One more separated link [Menu 1.1]</a></li> <li> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown [Menu 1.1] <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Action [Menu 1.2]</a></li> <li> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown [Menu 1.2] <b class="caret"></b></a> <ul class="dropdown-menu"> <li> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown [Menu 1.3] <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Action [Menu 1.4]</a></li> <li><a href="#">Another action [Menu 1.4]</a></li> <li><a href="#">Something else here [Menu 1.4]</a></li> <li class="divider"></li> <li><a href="#">Separated link [Menu 1.4]</a></li> <li class="divider"></li> <li><a href="#">One more separated link [Menu 1.4]</a></li> </ul> </li> </ul> </li> </ul> </li> </ul> </li> <li> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu 2 <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Action [Menu 2.1]</a></li> <li><a href="#">Another action [Menu 2.1]</a></li> <li><a href="#">Something else here [Menu 2.1]</a></li> <li class="divider"></li> <li><a href="#">Separated link [Menu 2.1]</a></li> <li class="divider"></li> <li><a href="#">One more separated link [Menu 2.1]</a></li> <li> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown [Menu 2.1] <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Action [Menu 2.2]</a></li> <li><a href="#">Another action [Menu 2.2]</a></li> <li><a href="#">Something else here [Menu 2.2]</a></li> <li class="divider"></li> <li><a href="#">Separated link [Menu 2.2]</a></li> <li class="divider"></li> <li> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown [Menu 2.2] <b class="caret"></b></a> <ul class="dropdown-menu"> <li> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown [Menu 2.3] <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Action [Menu 2.4]</a></li> <li><a href="#">Another action [Menu 2.4]</a></li> <li><a href="#">Something else here [Menu 2.4]</a></li> <li class="divider"></li> <li><a href="#">Separated link [Menu 2.4]</a></li> <li class="divider"></li> <li><a href="#">One more separated link [Menu 2.4]</a></li> </ul> </li> </ul> </li> </ul> </li> </ul> </li> </ul> </div><!--/.nav-collapse --> </div> </div> <div class="container"> <div class="navbar-template text-center"> <h1>Bootstrap NavBar (Updated: 15 Nov 2016)</h1> <p class="lead text-info">NavBar with too many childs.</p> </div> </div><!-- /.container --> |
I hope this tutorial helped you create multi level menu bar.
If you like FreeWebMentor and you would like to contribute, you can write an article and mail your article to [email protected] Your article will appear on the FreeWebMentor main page and help other developers.
Article Tags: bootstrap 3 navbar tutorial, bootstrap navbar center, bootstrap navbar color, bootstrap navbar examples, bootstrap navbar-toggle, bootstrap vertical navbar, multilevel NavBar, navbar bootstrap