bootstrap 3 level collapsing menu

Gibt es jemanden, der mir ein einfaches 3-stufiges kollabierendes Menü für bootstrap navbar zur Verfügung stellen kann? Ich schaffe es nicht, die dritte Ebene zu öffnen. Kann jemand meinen Code anpassen, um eine dritte Ebene hinzuzufügen?bootstrap 3 level collapsing menu

Dies ist das Zwei-Ebenen-Menü, das ich habe:

<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>

dachte ich, so etwas wie:

<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>

aber das Arbeiten ist nicht ..

Quelle

2013-06-29 jens_vdp

Schauen Sie auch hier http://bootsnipp.com/snippets/featured/multi-level-dropdown-menu-bs3 –

Bootstrap 2.3.x und höher unterstützt die 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

Quelle

2013-06-30 12:02:38 ZimSystem

, die den Trick tat, dank ! –

+27

Und Bootstrap 3 Tropfen Untermenü Unterstützung ... – Michael

Ja, siehe diesen Thread für Bootstrap v3 Untermenü: http://StackOverflow.com/Questions/18023493/bootstrap-3-Dropdown-Sub-Menu-Missing – ZimSystem

Bootstrap 3 hat die native Unterstützung für verschachtelte kollabierende Menüs verworfen, aber es gibt eine Möglichkeit, sie mit einem Skript von Drittanbietern wieder zu aktivieren. Es heißt SmartMenus. Das bedeutet, dass Sie Ihrer Seite drei neue Ressourcen hinzufügen müssen, aber Bootstrap 3.x unterstützt nahtlos mehrere Ebenen von Menüs für verschachtelte <ul>/<li> Elemente mit class="dropdown-menu". Es zeigt automatisch auch die richtige Caret-Anzeige an.

<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>

Hier ist eine Demo-Seite: http://vadikom.github.io/smartmenus/src/demo/bootstrap-navbar-fixed-top.html

Quelle

2017-06-09 14:58:09 Tony

Antwort

Verwandte Themen