Twitter Bootstrap: Collapse nur bestimmte Menüpunkte in Drop-down

Question

Ich frage mich, wie man ein Twitter Bootstrap navbar erstellen, die Elemente in diesem Menü, ein oder zwei Elemente auf einmal bei der Größenanpassung des Browserfensters kollabiert.

Die meisten Navbars, die ich gesehen habe, haben die gesamte Navbar in einem Drop-Down-Menü zusammengefasst. im Grunde versteckt alles auf dieser navbar, wenn das Fenster in der Größe geändert wird. Aber ich brauche es, um einige Menüpunkte zu enthüllen; so ein teilweiser Zusammenbruch.

Hier ist ein Beispiel dafür, was ich meine (Menü unten):

Startseite | Über | Dienstleistungen | Bestellung | Kontakt

Wenn die Browser-Fenster von rechts geändert wird, was ich tun möchte, ist den letzten Menüpunkt setzen (oder zwei) in eine Drop-Down so dann würde es so aussehen:

Startseite | Über | Dienstleistungen | Mehr

    -> Order 
        -> Contact 

‚Mehr‘ würde automatisch als Drop-Down-Menü erstellt werden muß, und es automatisch Liste ‚Order‘ und Menü ‚Kontakt‘ Elemente in diesem Dropdown-Menü. Und wenn das Fenster kleiner wird, werden mehr Elemente in dieser Navigationsleiste zu diesem Dropdown-Menü hinzugefügt. Wenn die Größe des Browserfensters auf die volle Bildschirmbreite geändert wird, wird die Navigationsleiste wieder normal angezeigt. Das ist was benötigt wird.

Von den vielen Links, die ich angeschaut habe, hier sind ein paar Links, die ich gefunden habe (die nicht die ganze Navbar in ein Dropdown-Menü klopft) aber immer noch wie alle anderen tut es nicht was ich beschrieben:

1. http://jsfiddle.net/caio/gvw7j/embedded/result/
2. Twitter Bootstrap Multilevel Dropdown Menu

Was ist der beste Weg zu erreichen, was ich jedes Beispiel oben verwenden müssen?

Answer 1

Bestimmen Sie zuerst, welche Nav-Elemente an jedem Breiten-Haltepunkt "verschwinden" sollen. Fügen Sie dann die korrekten hidden * -Klassen hinzu, um die Navigationselemente basierend auf dem aktuellen Haltepunkt auszublenden.

Meine Lösung erfordert, dass Sie einige der nav Elemente duplizieren, sondern setzen ihre Sichtbarkeit, die hidden- * Klassen, so dass sie nur auf der entsprechenden Breite Haltepunkt zeigen.

Grundsätzlich, wenn der Browser schmäler zu machen, wird ein nav Element aus der Haupt-Navigationsleiste ausgeblendet werden, und das damit verbundene nav Element wird in der Dropdown-Liste angezeigt werden. In meinem Beispiel sind Navigationselemente an jedem der vier Standardhaltepunkte ausgeblendet.

<nav class="navbar navbar-default navbar-static-top navbar-inverse" role="navigation"> 
<div class="container-fluid"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-menu"> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
     <a href="/" class="navbar-brand">Brand Name</a> 
    </div> 
    <div id="navbar-menu" class="collapse navbar-collapse"> 
     <ul class="nav navbar-nav"> 
      <!--- Include all menu items, below, regardless of display width. ---> 
      <!--- This allows the full menu to be displayed on extra-small (xs) devices. ---> 
      <!--- Hide menu items depending on the available display width. ---> 
      <li><a href="/calendar/">Calendar</a></li> 
      <li><a href="/journal/">Journal</a></li> 
      <li><a href="/shows/">Shows</a></li> 
      <li><a href="/venues/">Venues</a></li> 

      <!--- Hide the following menu items depending on the available display width. ---> 
      <!--- Menu items that can't fit on the main nav bar will be displayed in the "More" dropdown menu. ---> 
      <li class="hidden-sm"><a href="/blackouts/">Blackouts</a></li> 
      <li class="hidden-sm"><a href="/tasks/">Tasks</a></li> 
      <li class="hidden-sm hidden-md"><a href="/songs/">Songs</a></li> 
      <li class="hidden-sm hidden-md"><a href="/testimonials/">Testimonials</a></li> 
      <li class="hidden-sm hidden-md hidden-lg"><a href="/artists/">Artists</a></li> 
      <li class="hidden-sm hidden-md hidden-lg"><a href="/categories/">Categories</a></li> 
      <li class="hidden-sm hidden-md hidden-lg"><a href="/cities/">Cities</a></li> 
      <li class="hidden-sm hidden-md hidden-lg"><a href="/reports/">Reports</a></li> 
      <li class="hidden-sm hidden-md hidden-lg"><a href="https://stackoverflow.com/users/">Users</a></li> 

      <!--- The "More" dropdown menu item will be hidden on extra-small displays. ---> 
      <li class="dropdown hidden-xs"> 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown">More <b class="caret"></b></a> 
       <ul class="dropdown-menu"> 
        <li class="hidden-lg hidden-md"><a href="/blackouts/">Blackouts</a></li> 
        <li class="hidden-lg hidden-md"><a href="/tasks/">Tasks</a></li> 
        <li class="hidden-lg"><a href="/songs/">Songs</a></li> 
        <li class="hidden-lg"><a href="/testimonials/">Testimonials</a></li> 
        <li class="divider hidden-lg"></li> 

        <!--- These menu items will only appear in the "More" dropdown menu. ---> 
        <li><a href="/artists/">Artists</a></li> 
        <li><a href="/categories/">Categories</a></li> 
        <li><a href="/cities/">Cities</a></li> 
        <li><a href="/reports/">Reports</a></li> 
        <li><a href="https://stackoverflow.com/users/">Users</a></li> 
       </ul> 
      </li> 
     </ul> 
     <ul class="nav navbar-nav navbar-right"> 
      <li><a href="/?signout" id="signout"><span class="glyphicon glyphicon-lock"></span> Sign Out</a></li> 
     </ul> 
    </div> 
</div>