Великий Путь Вебмастера от идеи до интернет бизнеса
Блог Романа Чуешова
Начни зарабатывать на создании сайтов, лендингов, мобильных приложениях и новейших интернет технологиях

Создаем мобильное меню на bootstrap. Сделайте современное меню с помощью пошаговой инструкции

Доброго времени суток, начинающие веб-разработчики и дорогие подписчики. Текущую статью я решил посвятить интересному и востребованному материалу, а именно я научу вас создавать мобильное меню на 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.

Для тех, кто не знает, что нужно прописывать, я прикрепил необходимые строки кода:

e7333b98d5c9be90b96e412f05370bbc001

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


Как все уместить в одну строку?

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

Если же пользователь выбрал нужную ссылку, то практически на весь дисплей его смартфона отображается контент, а сверху – компактная шапка с кнопкой. Такой элемент с тремя полосками в некоторых кругах называют еще «Гамбургер меню».

Как же создать этот чудо-инструмент?

Для этого нужно использовать полезный класс 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>

Надеюсь данная публикация научила вас чему-то новому и была интересной. А если это так, то подписывайтесь на мой блог и рассказывайте о нем друзьям. Я буду вам очень признателен. Пока-пока!

С уважением, Роман Чуешов


Прочитано: 219 раз
Этот блог уже читают
читай и ты!
Оставить коментарий
:p :-p 8) 8-) :lol: =( :( :-( :8 ;) ;-) :(( :o: