Автоматическое свёртывание меню navbar на одностраничном лендинге в мобильной версии при нажатии на пункт меню

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

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

Делается это легко, добавляя 2 аттрибута к ссылкам ('data-toggle'=>'collapse', 'data-target'=>'.collapse.in')

echo Nav::widget([
        'options' => ['class' => 'nav nav-pills navbar-nav navbar-center'],
        'items' => [
            ['label' => 'Программа', 'url' => '#program', 'linkOptions' => ['class'=>'scrolls', 'data-toggle'=>'collapse', 'data-target'=>'.collapse.in']],
            ['label' => 'Цена', 'url' => '#price', 'linkOptions' => ['class'=>'scrolls', 'data-toggle'=>'collapse', 'data-target'=>'.collapse.in']],
        ],
    ]);

Аттрибут 'data-target'=>'.collapse.in' - указывает, что сворачивать нужно блок с классом .collapse, а это есть всё выпадающее меню, и добавленный класс .in написали, чтобы блок сворачивался только если он развёрнут. Иначе даже на десктопной версия navbar будет пытаться свернуться, из-за чего на вид будет рваный скачок - это коряво смотрится.

Такое проделывать имеет смысл только для одностраничников, так как на обычном сайте при переходе в раздел меню, страница перезагружается и меню тоже принимает исходное свёрнутое состояние. Хотя с тенденцией сайтов к асинхронности и ajax, pjax - загрузкам, может это будет и актуально для таких сайтов тоже.

14 октября 2018, Программирование, веб-кодинг