Простое адаптивное меню на блоках

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

Один из ключевых элементов сайта — это его меню, благодаря которому осуществляются переходы между основными страницами. Рассмотрим создание простого одноуровневого адаптивного меню средствами Bootstrap 4.

Bootstrap 4, это новая версия популярного фреймворка для адаптивной вёрстки. Несмотря на то, что на момент написания статьи она ещё находится в стадии бета-тестирования — это всё-таки «завтрашний день» и потому имеет смысл к ней присмотреться.

Наше адаптивное меню мы вопреки традиции будем строить на блоках (div) так как это даёт большую гибкость в отношении дизайна. В том числе позволяет без труда разместить пункты меню равномерно по ширине контейнера.

В начале создадим HTML каркас меню.

Первый блок с классом row это панель с кнопкой «гамбургер», которая будет отображаться на мобильных устройствах. При большом разрешении экрана она будет скрыта.

Обратите внимание, что, начиная в Bootstrap 4 beta не доступны ставшие привычными классы семейств «hidden» и «visible». Их заменили классы семейства «d».

Подробнее в статье посвящённой переходу от альфа к бета версии Bootstrap 4 и обсуждении на StackOverflow.

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

Ниже приведены стили отвечающие за адаптивность меню (остальные классы и id относятся к внешнему виду или используются в JavaScript либо Bootstrap):

Теперь при малых разрешениях экрана отображается только «мобильная» панель. Но, нам необходимо, чтобы возможность пользоваться меню сохранялась и на смартфонах с планшетами.

Поэтому добавим специальную функцию, которая будет управлять видимостью меню в «мобильном» варианте.

Для этого мы воспользуемся библиотекой jQuery, а точнее её функциями on и toggle.

Наше адаптивное меню готово. Несмотря на то, что мы не использовали теги ul или nav меню работает корректно и не представляет сложности в плане использования.

2 комментария

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *