menu di compressione a 3 livelli di bootstrap

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

fonte

2013-06-29 jens_vdp

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

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

fonte

2013-06-30 12:02:38 ZimSystem

Che ha fatto il trucco, grazie ! –

+27

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

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

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

fonte

2017-06-09 14:58:09 Tony

menu di compressione a 3 livelli di bootstrap

risposta

Problemi correlati