Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

How to make a 3-level collapsing menu in Bootstrap?

Tags:

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&nbsp;<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.

like image 447
jens_vdp Avatar asked Jun 29 '13 13:06

jens_vdp

People also ask

How do I create a collapsible menu in Bootstrap?

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.

How do you collapse in Bootstrap 3?

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.

How do I make a collapsible sidebar in Bootstrap?

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.

How do you keep multiple collapses open in Bootstrap 4?

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.

2 Answers

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

like image 118
Zim Avatar answered Nov 08 '22 19:11

Zim

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

like image 31
Tony Avatar answered Nov 08 '22 20:11

Tony
Sign in to Comment

Related questions

Go Templates: Are Nested Ranges Possible?
Eclipse complains: "Invalid overload of 'endl'" - but code does compile
AngularJS: ng-model inside ng-repeat?
Changing text Size of menu item in android
Difference between NVARCHAR in Oracle and SQL Server?
Is it possible to define an std::thread and initialize it later?
git subtree: possible to change subtree branch/path in a forked repository?
How to Integrate TortoiseSVN with Eclipse IDE?
Escape String - Output rails string in Javascript [duplicate]
Which html is supported in Jenkins job description
django prefetch_related id only
cv2.imread flags not found

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!