Twitter Bootstrap: сворачивайте только определенные пункты меню в раскрывающийся список

Мне интересно, как создать загрузочный лоток Twitter navbar, который разрушает элементы в этом меню, по одному или двум элементам при изменении размера окна браузера.

Большинство навигаторов, которые я видел, разрушили весь навигатор в один раскрывающийся список; в основном скрывая все на этом навигаторе при изменении размера окна. Но мне нужно, чтобы все еще показывали некоторые пункты меню; так что частичный коллапс.

Вот пример того, что я имею в виду (меню ниже):

Главная | О проекте | Услуги | Заказать | Контакт

Когда окно браузера изменяется с правой стороны, то я хочу, чтобы он поместил последний пункт меню (или два) в раскрывающийся список, чтобы он выглядел следующим образом:

Главная | О проекте | Услуги | Подробнее

                    -> Order
                    -> Contact

"Больше" необходимо будет автоматически создать как раскрывающееся меню, и оно автоматически отобразит пункты меню "Заказ" и "Контакт" в этом выпадающем меню. И по мере того, как окно становится меньше, в это раскрывающееся меню будет добавлено больше элементов в этой навигационной панели. И когда окно браузера будет изменено до полной ширины экрана, навигационная панель вернется в нормальное состояние. Это то, что нужно.

Из многих ссылок, на которые я смотрел, вот несколько ссылок, которые я нашел (которые не деактивируют весь навигатор в одно раскрывающееся меню), но все равно, как и все остальные, он не делает то, что я описал

Каков наилучший способ добиться того, что мне нужно, используя какой-либо пример выше?

ОТВЕТЫ

Ответ 1

Сначала определите, какие навигационные элементы должны "исчезать" на каждой точке останова. Затем добавьте правильные скрытые * классы, чтобы скрыть навигационные элементы на основе текущей точки останова.

Мое решение требует, чтобы вы дублировали некоторые элементы навигации, но устанавливали их видимость, используя скрытые * классы, чтобы они отображались только в соответствующей точке останова.

В основном, когда браузер становится более узким, навигационный элемент будет скрыт от основной навигационной панели, а соответствующий навигационный элемент будет отображаться в раскрывающемся списке. В моем примере навигационные элементы скрыты в каждой из четырех контрольных точек ширины по умолчанию.

<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="/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="/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>