Доброго времени суток, начинающие веб-разработчики и дорогие подписчики. Текущую статью я решил посвятить интересному и востребованному материалу, а именно я научу вас создавать мобильное меню на Bootstrap.
После прочтения публикация вы узнаете, каким способом можно уместить все пункты навигационной панели на маленьком экране, какие инструменты фреймворка для этого необходимо знать и на практике запрограммируете пример реализации. Давайте приступать к изучению нового материала!
Создам-ка я меню!
В одной из прошлых публикаций я показывал вам, как с помощью элемента Navs создаются вкладки. Сегодня же мы поговорим о том виде навигации, которая располагается в шапке веб-страницы. Для этого вам необходимо познакомиться с таким многофункциональным инструментом, как Navigation Bar.
С его помощью можно гибко управлять внешним видом, местом расположения и типом всех пунктов меню. Для комфортного изучения основных компонентов элемента navbar я систематизировал их в таблицу.
Класс | Предназначение |
navbar-inner | Делает инверсию стилевого оформления навигационной панели; она выполнена в черно-белых цветах. |
navbar-brand | Специальный якорь для указания, что данная ссылка выделена под бренд. |
active | Определяет активную ссылку при открытии сайта. |
divider-vertical | Разделяет вертикальными полосами пункты меню. |
navbar-form | Создает формы. |
navbar-search | Создает диалоговое окно поиска. |
pull-left и pull-right | Выравнивает заданные компоненты (формы, навигационные анкоры, контент и т.д.) по правой или левой стороне. |
navbar-fixed-*, где * — top или bottom | Фиксирует панель навигации сверху или снизу веб-страницы. |
navbar-default | Стандартный вид блока меню. |
Вот как выглядит программная реализация данного элемента.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <nav class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">Логотипчик</a> </div> <ul class="nav navbar-nav"> <li class="active"><a href="#">Главная</a></li> <li><a href="#">Обо мне</a></li> <li><a href="#">Проекты</a></li> <li><a href="#">Контакты</a></li> </ul> </div> </nav> <div class="container"> <h3>Основной контент</h3> <p>Тут что-то написано.</p> </div> |
Не забудьте в хедере документа прописать важные ссылки на стили и скрипты для подключения текущей версии Бутстрапа – Bootstrap 3.3.7.
Для тех, кто не знает, что нужно прописывать, я прикрепил необходимые строки кода:
e423db6ba7420e5bf78675a001099c7b001
Если вы запустили пример, то однозначно заметили, что при уменьшении экрана пункты меню из горизонтального положения перестраиваются в вертикальное. Все это достигается за счет респонсивного дизайна, предусмотренного в фреймворке. Однако это не есть отличное решение отображения навигации при просмотре сайта на мобильных устройствах.
Как все уместить в одну строку?
Для мобильных версий веб-приложений существует одно отличное решение – специальная кнопка меню, при нажатии на которую раскрывается полный перечень пунктов панели навигации.
Если же пользователь выбрал нужную ссылку, то практически на весь дисплей его смартфона отображается контент, а сверху – компактная шапка с кнопкой. Такой элемент с тремя полосками в некоторых кругах называют еще «Гамбургер меню».
Как же создать этот чудо-инструмент?
Для этого нужно использовать полезный класс Navigation Bar navbar-collapse. С помощью navbar-collapse реализуется скрытие пунктов меню в кнопку.
Чтобы создать «Гамбургер меню», необходимо задать в теге <button> три span-а с указанием класса под названием icon-bar. При этом обязательным условием является объявление класса navbar-toggle для самого button-а, а также атрибута data-toggle с параметром collapse. В такой способ будет создана кнопка с тремя полосками.
После этого нужно прописать сами пункты навигационной панели, указав в этом блоке классы collapse и navbar-collapse.
А теперь важный момент! Чтобы связать работу кнопки с меню необходимо для блока навигации задать идентификатор (id) и после прописать его имя для button-а в атрибуте data-target.
Вот как это будет выглядеть в коде:
1 2 3 | <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> |
Надеюсь данная публикация научила вас чему-то новому и была интересной. А если это так, то подписывайтесь на мой блог и рассказывайте о нем друзьям. Я буду вам очень признателен. Пока-пока!
С уважением, Роман Чуешов