Развернуть/свернуть мобильный навигатор без JavaScript

Question

На мобильных устройствах Bootstrap 3 по умолчанию уменьшает навигационную панель (navbar) до значка гамбургера. При нажатии гамбургера JavaScript переключает отображение пунктов меню навигации - либо расширяя, либо сворачивая навигационную панель. Но

как переключить загрузку мобильного навигационного сворачивания/развернуть без использования JavaScript?

Если бы это было возможно, он будет иметь хорошие преимущества производительности: пользователи уже могут перемещаться перед тем JavaScript выполняется (хороший плюс на слоеное мобильной связи), а также небольшие проекты могут быть в состоянии понизить зависимость от Jquery + бутстрапе javascript полностью, экономя около 45 тыс. при загрузке первой страницы. Кроме того, сайт становится более надежным в случае ошибок JS - по крайней мере, навигационная страница остается доступной.

В качестве альтернативы, можно было бы re-implement the bootstrap JS without jQuery dependency - сделано here для навигатора.

Для справки, это то, что static navbar top пример выглядит в мобильном режиме:

Answer 1

Да, это возможно!

Получение BS3 мобильного Navbar для переключения без JavaScript

1. создает скрытый флажок, который содержит состояние NavBar (развернуть при проверке)

2. изменения Navbar button к label для этого невидимого флажка

3. использовать CSS General Sibling Selector для отображения отображения навигационной панели.

Как изменить атрибуты CSS без JavaScript обсуждался ранее на SO, и принцип показан там 1. Применение этого бутстрапа является простым.

Попробуйте Live demo благодаря rawgit или увидеть его в производство на flexponsive

Полный демо доступно на проекте Github bs3-navbar-collapse-without-javascript.

Browser Поддержка

• СМЧ Селектор общий родственный широко поддерживается
• успешно протестирована в мобильном телефоне: Android 5 и IOS 8
• также работает на рабочем столе: Chrome 43 и Firefox 38

Ограничения

• выпадающие все еще требуют JS, если вы решите использовать их

шаги подробно

Во-первых, пользовательские CSS вам нужно добавить:

/* show the collapse when navbar toggle is checked */ 
#navbar-toggle-cbox:checked ~ .collapse { 
    display: block; 
} 

/* the checkbox used only internally; don't display it */ 
#navbar-toggle-cbox { 
    display:none 
} 

Затем измените NavBar HTML следующим образом:

<!-- insert checkbox --> 
<input type="checkbox" id="navbar-toggle-cbox"> 
<!-- change the "hamburger" icon from being a button to a label for checkbox --> 
<div class="navbar-header"> 
<label for="navbar-toggle-cbox" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
    <span class="sr-only">Toggle navigation</span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    </label> 
<!-- end label not button -->