2013-06-29 84 views
15

C'è qualcuno che può fornirmi un menu di compressione di base a 3 livelli per la barra di navigazione bootstrap? Non riesco ad aprire il terzo livello. Qualcuno può adattare il mio codice per aggiungere un terzo livello?menu di compressione a 3 livelli di bootstrap

Questo è il menu a due livelli che ho:

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

ho pensato qualcosa di simile:

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

Ma che non funziona ..

+0

Date un'occhiata qui pure http://bootsnipp.com/snippets/featured/multi-level-dropdown-menu-bs3 –

risposta

28

Bootstrap 2.3.x e supporti successivi 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

+0

Che ha fatto il trucco, grazie ! –

+27

E il bootstrap 3 rilascia il supporto del sottomenu ... – Michael

+8

Sì, guarda questo thread per il sottomenu Bootstrap v3: http://stackoverflow.com/questions/18023493/bootstrap-3-dropdown-sub-menu-missing – ZimSystem

1

Bootstrap 3 ha abbandonato il supporto nativo per i menu di compressione nidificati, ma c'è un modo per riattivarlo con uno script di terze parti. Si chiama SmartMenus. Significa aggiungere tre nuove risorse alla tua pagina, ma supporta perfettamente Bootstrap 3.x con più livelli di menu per gli elementi nidificati <ul>/<li> con class="dropdown-menu". Visualizza automaticamente anche l'indicatore del caret corretto.

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

Ecco una pagina di configurazione: http://vadikom.github.io/smartmenus/src/demo/bootstrap-navbar-fixed-top.html