Twitter Bootstrap: Zwiń tylko niektóre elementy menu do rozwijanego menu

Question

Zastanawiam się, jak utworzyć Bootstrap na Twitterze navbar, który zwija elementy w tym menu, jeden lub dwa elementy naraz po zmianie rozmiaru okna przeglądarki.

Większość wyświetlonych navbarów zwinęła cały pasek nawigacyjny w jednym menu rozwijanym; zasadniczo ukrywając wszystko w tym pasku po zmianie rozmiaru okna. Ale potrzebuję go, aby nadal odkrywać niektóre elementy menu; więc częściowe zawalenie.

Oto przykład tego, co mam na myśli (menu poniżej):

główna | O | Usługi | Zamów | Skontaktować

Gdy okno przeglądarki jest zmieniany z prawego skrzydła, co chcę zrobić, to umieścić menu ostatniego (lub dwa) w rozwijanej tak to będzie wyglądać następująco:

główna | O | Usługi | Więcej

    -> Order 
        -> Contact 

„więcej” musiałyby być automatycznie tworzone jako menu rozwijanego i automatycznie listy „Order” i pozycje menu „kontakt” w tym menu rozwijanego. Gdy okno się zmniejszy, do tego menu zostanie dodane więcej elementów tego paska nawigacji. A gdy okno przeglądarki zostanie przeskalowane do pełnej szerokości ekranu, wówczas pasek nawigacyjny wróci do normy. To jest potrzebne.

Spośród wielu linków, które obejrzałem, oto kilka linków, które znalazłem (które nie przewracają całego navbara w jednym rozwijanym menu), ale nadal lubię wszystkie inne, ale nie robię tego co mam opisane:

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

Jaki jest najlepszy sposób, aby osiągnąć to, czego potrzebuję za pomocą dowolnego przykładu powyżej?

Answer 1

Najpierw określ, które elementy powinny "zniknąć" w każdym punkcie przerwania szerokości. Następnie dodaj odpowiednie klasy ukryte *, aby ukryć elementy nawigacyjne na podstawie bieżącego punktu przerwania.

Moje rozwiązanie wymaga duplikowania niektórych elementów nawigacyjnych, ale ustawienie ich widoczności za pomocą klas hidden- *, tak aby były wyświetlane tylko w odpowiednim punkcie przerwania szerokości.

Zasadniczo, gdy przeglądarka jest węższa, element nawigacyjny zostanie ukryty w głównym pasku nawigacyjnym, a powiązany element nawigacyjny zostanie wyświetlony w menu rozwijanym. Mój przykład zawiera elementy nav ukryte w każdym z czterech domyślnych szerokości punktów przerwania.

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