На этом уроке вы узнаете, как создать адаптивное навигационное меню для сайта с помощью Twitter Bootstrap 3.

Создание навигационного меню в Twitter Bootstrap 3

Навигационное меню (navbar) — это область страницы, на которой расположены элементы (в основном гиперссылки, поле поиска и др.), предназначенные для перехода на основные страницы сайта или для осуществления других основных действий (например, информирование о количестве заказанных товаров, находящихся в корзине).

Навигационные меню в Bootstrap 3 является адаптивным. Т.е. на устройствах с большим экраном оно отображается обыкновенно, а на устройствах, имеющих маленький дисплей, оно скрывается и вызывается с помощью кнопки.

Создание навигационного меню в Twitter Bootstrap 3 осуществляется посредством компонента navbar. HTML-код структуры данного меню имеет следующий вид:

<!-- Меню navbar -->
<nav class="navbar navbar-default">
  <!-- Бренд и переключатель, который вызывает меню на мобильных устройствах -->
  <div class="navbar-header">
    <!-- Кнопка с полосочками, которая открывает меню на мобильных устройствах -->
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-menu" aria-expanded="false">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <!-- Бренд или логотип фирмы (обычно содержит ссылку на главную страницу) -->
    <a href="#" class="navbar-brand">Бренд</a>
  </div>
  <!-- Содержимое меню (коллекция навигационных ссылок, формы и др.) -->
  <div class="collapse navbar-collapse" id="main-menu" >
      <!-- Список ссылок, расположенных слева -->
    <ul class="nav navbar-nav">
      <!--Элемент с классом active отображает ссылку подсвеченной -->
      <li class="active"><a href="#">Главная <span class="sr-only">(current)</span></a></li>
      <li><a href="#">Статьи</a></li>
      <li><a href="#">Новости</a></li>
    </ul>
      <!-- Список ссылок, расположенный справа -->
    <ul class="nav navbar-nav navbar-right">
      <li><a href="#">Войти</a></li>
    </ul>
  </div>
</nav>

Вышеприведенный пример будет выглядеть примерно так:

Навигационное меню

Добавление форм в navbar

Помещение формы в навигационное меню navbar осуществляется посредством HTML элемента form, к которому необходимо добавить класс navbar-form. Данный класс осуществляет корректное положение формы в адаптивном меню Bootstrap 3.

<form class="navbar-form navbar-left" role="search">
  <div class="form-group">
    <input type="text" class="form-control" placeholder="">
  </div>
  <button type="submit" class="btn btn-default">Найти</button>
</form>

Добавление кнопок в navbar

При размещении кнопок в навигационном меню Bootstrap (вне формы), к ним (элементам button или a) необходимо добавить класс navbar-btn. Данный класс предназначен для того, чтобы откорректировать положение кнопки в navbar, т.е. выровнять её по вертикали.

<button type="button" class="btn btn-default navbar-btn">Войти</button>

Добавление текста (надписи) в navbar

При помещении текста в navbar, например, с помощью тега <p></p>, добавляйте к нему класс navbar-text. Это обеспечит корректное отображение этого текста в навигационном меню.

<p class="navbar-text">Вошёл под именем Jhon</p>

Размещение ссылок в navbar вне основной навигации

При размещении обычных ссылок вне стандартного навигационного компонента navbar (элемента ul с классами nav и navbar-nav) к ним необходимо добавить класс navbar-link. Это обеспечит правильное отображение ссылок, расположенным вне основной навигации, внутри компонента navbar.

<p class="navbar-text navbar-right">Вошёл как <a href="#" class="navbar-link">John</a></p>

Выравнивание компонентов в navbar

Для выравнивания компонентов (гиперссылок, форм, кнопок и текста) применяйте служебные классы Bootstrap 3 navbar-left или navbar-right. Эти классы позволяет выровнять элемент по левому или правому краю внутри навигационного меню.

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

Примечание: Выравнивание множества элементов по правому краю не поддерживается в Twitter Bootstrap 3.

Навигационное меню с выпадающим подменю и поисковой формой.

<nav role="navigation" class="navbar navbar-default">
  <!-- Brand and toggle get grouped for better mobile display -->
  <div class="navbar-header">
    <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a href="#" class="navbar-brand">Бренд</a>
  </div>
  <!-- Collection of nav links, forms, and other content for toggling -->
  <div id="navbarCollapse" class="collapse navbar-collapse">
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Главная</a></li>
      <li><a href="#">Статьи</a></li>
      <li class="dropdown">
        <a data-toggle="dropdown" class="dropdown-toggle" href="#">Новости <b class="caret"></b></a>
        <ul role="menu" class="dropdown-menu">
          <li><a href="#">Windows</a></li>
          <li><a href="#">Mac OS</a></li>
          <li><a href="#">Linux</a></li>
          <li class="divider"></li>
          <li><a href="#">Другие системы</a></li>
        </ul>
      </li>
    </ul>
    <form role="search" class="navbar-form navbar-left">
      <div class="form-group">
        <input type="text" placeholder="Найти" class="form-control">
      </div>
    </form>
    <ul class="nav navbar-nav navbar-right">
      <li><a href="#">Войти</a></li>
    </ul>
  </div>
</nav>

Вышеприведенный пример будет выглядеть примерно так:

Навигационное меню с поиском

Фиксированное навигационное меню (Fixed Navbar)

Twitter Bootstrap 3 также позволяет создавать фиксированные навигационные меню. Фиксированное меню – это такое, которое можно прикрепить к верхней или нижней части страницы так, что оно будет находиться в этом положении всегда, т.е. независимо от текущего положения прокрутки страницы.

Для прикрепления навигационного меню navbar к верхней части страницы необходимо к нему добавить дополнительный класс navbar-fixed-top. Т.е. добавить этот класс туда, где расположены классы навигационного меню navbar и navbar-default. Кроме этого, содержимое меню желательно поместить в контейнер с классом container или container-fluid. Это действие обеспечит центрирование меню относительно краёв страницы, а также установит необходимые отступы для его содержимого.

Обратите внимание на то, что после перевода навигационного меню navbar в фиксированное состояние оно будет накладываться на содержимое страницы. Это будет происходить из-за того, что оно (меню) будет выдернуто из нормального потока расположения элементов, и располагаться уже поверх них. Чтобы это исправить необходимо добавить к открывающему тегу body CSS-свойство padding-top.

Например, установим для основного содержимого страницы отступ padding-top, равный 70 пикселей (по умолчанию навигационное меню имеет высоту 50px):

body { padding-top: 70px; }

Этот стиль необходимо располагать после подключения стандартных стилей Bootstrap (bootstrap.css или bootstrap.min.css).

<nav role="navigation" class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a href="#" class="navbar-brand">Бренд</a>
    </div>
    <!-- Collection of nav links and other content for toggling -->
    <div id="navbarCollapse" class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Главная</a></li>
        <li><a href="#">Статьи</a></li>
        <li><a href="#">Новости</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Войти</a></li>
      </ul>
    </div>
  </div>
</nav>

Вышеприведенный пример будет выглядеть примерно так:

Навигационное меню

Навигационное меню, прикрепленное к нижней части страницы

Аналогично, чтобы создать навигационное меню, прикрепленного к нижней части страницы необходимо добавить дополнительный класс .navbar-fixed-bottom.

<nav role="navigation" class="navbar navbar-default navbar-fixed-bottom">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a href="#" class="navbar-brand">Бренд</a>
    </div>
    <!-- Collection of nav links and other content for toggling -->
    <div id="navbarCollapse" class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Главная</a></li>
        <li><a href="#">Статьи</a></li>
        <li><a href="#">Новости</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Войти</a></li>
      </ul>
    </div>
  </div>
</nav>

Выше приведенный пример будет выглядеть примерно так:

Навигационное меню, прикрепленное к нижней части страницы

Примечание: Располагайте содержимое навигационного меню внутри контейнера (.container или .container-fluid) чтобы обеспечить соответствие отступов меню отступам основного содержания страницы.

Примечание: Фиксированное меню располагается поверх остального контента страницы. Если вы не добавите отступы для основного содержания страницы от ее верхней или нижней границы, то может случиться наложение. Так как фиксированная высота навигационного меню составляет 50px, то необходимо задать отступ более 50px (Например: body {padding-top: 70px;}), с помощью стиля CSS, файл которого необходимо подключить после основного CSS файла Bootstrap. В противном случае, значение заданного отступа работать не будет.

Создание статичного навигационного меню (Static Top Navbar) с помощью Twitter Bootstrap

В отличие от навигационных меню, прикрепленных строго к нижней или верхней части страницы, данное навигационное меню может быть расположено в любом месте страницы и имеет ширину элемента контейнера. Причем, для статичного навигационного меню, в отличие фиксированного, задавать дополнительные отступы не требуется. Чтобы создать статичное навигационное меню необходимо добавить дополнительный класс .navbar-static-top к основным классам навигационного меню .navbar и .navbar-default.

<nav role="navigation" class="navbar navbar-default navbar-static-top">
  <!-- Brand and toggle get grouped for better mobile display -->
  <div class="navbar-header">
    <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a href="#" class="navbar-brand">Бренд</a>
  </div>
  <!-- Collection of nav links and other content for toggling -->
  <div id="navbarCollapse" class="collapse navbar-collapse">
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Главная</a></li>
      <li><a href="#">Статьи</a></li>
      <li><a href="#">Новости</a></li>
    </ul>
    <ul class="nav navbar-nav navbar-right">
      <li><a href="#">Войти</a></li>
    </ul>
  </div>
</nav>

Выше приведенный пример будет выглядеть примерно так:

Навигационное меню

Инвертированное навигационное меню (Inverted Navbar) Twitter Bootstrap

Чтобы создать инвертированное навигационное меню Bootstrap, необходимо добавить дополнительный класс .navbar-inverse к классу .navbar.

<nav class="navbar navbar-inverse" role="navigation">
  ...
</nav>

Выше приведенный пример будет выглядеть примерно так:

Инвертированное навигационное меню