Menu
I am trying to make a 3-level collapsing navbar menu for Bootstrap, but I can't open the third level.
This is the two level menu which I have:
<link href="https://stackpath.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet"/> <div class="navbar navbar-fixed-top"> <div class="navbar-inner"> <div class="container"> <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a> <div class="nav-collapse"> <ul class="nav"> <a class="brand" href="#">Present Ideas</a> <li class="active"><a href="#">Home</a></li> <li><a href="#">Blog</a></li> <li><a href="#">About</a></li> <li><a href="#">Help</a></li> <li class="dropdown" id="accountmenu"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Account Settings<b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Login</a></li> <li><a href="#">Register</a></li> <li class="divider"></li> <li><a href="#">Logout</a></li> </ul> </li> </ul> <ul class="nav pull-right"> </ul> </div> <!--/.nav-collapse --> </div> </div> </div>I thought something like this would work:
<link href="https://stackpath.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet"/> <div class="navbar navbar-fixed-top"> <div class="navbar-inner"> <div class="container"> <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a> <div class="nav-collapse"> <ul class="nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Blog</a></li> <li><a href="#">About</a></li> <li><a href="#">Help</a></li> <li class="dropdown" id="accountmenu"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Account Settings<b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Login</a></li> <li class="item-148 dropdown parent"> <a href="/about/learn-more">Learn more <b class="caret-right"></b></a> <ul class="dropdown-menu"> <li class="item-149"><a href="/about/learn-more/the-software">The Software</a></li> <li class="item-150"><a href="/about/learn-more/the-project">The Project</a></li> <li class="item-151"><a href="/about/learn-more/the-leadership">The Leadership</a></li> <li class="item-152"><a href="/about/learn-more/open-source-matters">Open Source Matters</a></li> </ul> </li> <li class="divider"></li> <li><a href="#">Logout</a></li> </ul> </li> </ul> <ul class="nav pull-right"> </ul> </div> <!--/.nav-collapse --> </div> </div> </div>But that's not working.
447
Just add data-toggle="collapse" and a data-target to the element to automatically assign control of one or more collapsible elements. The data-target attribute accepts a CSS selector to apply the collapse to. Be sure to add the class collapse to the collapsible element.
Collapse using a Link You can use use a link to collapse content. To do this, use the <a> tag with an href value of the ID of the content to collapse. On the collapsible content's container, add the . collapse class, and be sure to give it an ID.
click(function(){ $('#sidebar'). removeClass('hidden-xs'); }); If you click the button it toggles the sidebar from the top. It be great to see the sidebar behave like the website above shows.
Assuming that you're using Bootstrap 4, you can simply remove the data-parent attribute from the element with the collapse class. This subscribes the collapse to events on #accordionExample , which is the main accordion element, via the data-parent attribute.
Bootstrap 2.3.x and later supports the dropdown-submenu..
<ul class="dropdown-menu"> <li><a href="#">Login</a></li> <li class="dropdown-submenu"> <a tabindex="-1" href="#">More options</a> <ul class="dropdown-menu"> <li><a tabindex="-1" href="#">Second level</a></li> <li><a href="#">Second level</a></li> <li><a href="#">Second level</a></li> </ul> </li> <li><a href="#">Logout</a></li> </ul> Working demo on Bootply.com
118
Bootstrap 3 dropped native support for nested collapsing menus, but there's a way to re-enable it with a 3rd party script. It's called SmartMenus. It means adding three new resources to your page, but it seamlessly supports Bootstrap 3.x with multiple levels of menus for nested <ul>/<li> elements with class="dropdown-menu". It automatically displays the proper caret indicator as well.
<head> ... <script src=".../jquery.smartmenus.min.js"></script> <script src=".../jquery.smartmenus.bootstrap.min.js"></script> ... <link rel="stylesheet" href=".../jquery.smartmenus.bootstrap.min.css"/> ... </head> Here's a demo page: http://vadikom.github.io/smartmenus/src/demo/bootstrap-navbar-fixed-top.html
31
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
