В наши дни адаптивная вёрстка уже давно стала обыденностью, так как позволяет использовать один и тот же шаблон для самых различных устройств.
Один из ключевых элементов сайта — это его меню, благодаря которому осуществляются переходы между основными страницами. Рассмотрим создание простого одноуровневого адаптивного меню средствами Bootstrap 4.
Наше адаптивное меню мы вопреки традиции будем строить на блоках (div) так как это даёт большую гибкость в отношении дизайна. В том числе позволяет без труда разместить пункты меню равномерно по ширине контейнера.
В начале создадим HTML каркас меню.
1 |
1 |
Первый блок с классом row это панель с кнопкой «гамбургер», которая будет отображаться на мобильных устройствах. При большом разрешении экрана она будет скрыта.
Подробнее в статье посвящённой переходу от альфа к бета версии Bootstrap 4 и обсуждении на StackOverflow.
Второй блок это собственно меню. Его видимостью мы будем управлять динамически при помощи JavaScript и медиа запроса.
Ниже приведены стили отвечающие за адаптивность меню (остальные классы и id относятся к внешнему виду или используются в JavaScript либо Bootstrap):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
.adaptive_menu_title{ font: 2em "arial"; } @media screen and (min-width:768px) { .menu_panel{ display: flex !important; } } @media screen and (max-width:767px) { .menu_panel{ display: none; } } #more{ float:right; } #more:before{ content: "\2261"; } |
Теперь при малых разрешениях экрана отображается только «мобильная» панель. Но, нам необходимо, чтобы возможность пользоваться меню сохранялась и на смартфонах с планшетами.
Поэтому добавим специальную функцию, которая будет управлять видимостью меню в «мобильном» варианте.
Для этого мы воспользуемся библиотекой jQuery, а точнее её функциями on и toggle.
1 2 3 |
$("#more").on("click", function (e) { $(".menu_panel").toggle(); }); |
Наше адаптивное меню готово. Несмотря на то, что мы не использовали теги ul или nav меню работает корректно и не представляет сложности в плане использования.
А где готовый пример можно увидеть?
Исходный код «готового примера» полностью открыт в рамках статьи.