Как создать меню на сайте с помощью Bootstrap

Оцените материал
(0 голосов)

Здравствуйте. Сегодня хочу продолжить рассматривать  примеры использования фреймворка Bootstrap 3 на благо верстки сайтов. Да это не конструктор сайтов, где вам  нужные элементы сайта можно перетащить мышкой в нужное место и для работы с ним особых знаний  в верстке сайтов не потребуется. Нет. Но он позволяет верстать «отзывчивые сайты» всем, кто освоит небольшой набор  трюков.

К сожалению, приходится признать, что знания Html и основы CSS  для изучения фреймворка Бутстрап 3  необходимы, без  них ві конечно же ничего не поймете.

В прошлом посте мы я писал о том   как добавить глиф-иконки на сайт,  и оформить таблицы.

Сегодня же  поговорим про  оформление с помощью Bootstrap 3  элементов навигации —  а именно хлебных крошек, вертикальных и горизонтальных  навигационных меню, ну и конечно же меню выпадающих. Это конечно не очень сложно, но на  реальных примерах учиться, как понятно, что  легче. В следующей статье мы разберем создание переключающихся вкладок с контентом в горизонтальном и вертикальном ( по типу аккордеона). И так  поехали...

 

Как в Bootstrap создать горизонтальное адаптивное меню

Создание горизонтального адаптивного меню для сайта в Bootstrap осуществляется с помощью компонента Navbar.

Navbar имеет 2 режима отображения:

  • десктопный (обычный) – выводятся все элементы меню;
  • мобильный (свёрнутый) – по умолчанию отображается бренд и кнопка «Гамбургер» (для открытия основного содержимого меню).
Десктопный вид меню Navbar (по умолчанию при ширине viewport >=768px)
 
Мобильный вид горизонтального меню Navbar
 
Мобильный вид открытого горизонтального меню Navbar
 

Режим отображения меню зависит от ширины браузера. По умолчанию меню Navbar имеет мобильный вид при ширине viewport меньше 768px.

Описание меню Navbar

Меню Navbar состоит из:

  • заголовка navbar-header (кнопки «Гамбургер» и бренда);
  • основной части (места для размещения ссылок, кнопок, форм и других элементов).

HTML-структура Bootstrap меню Navbar (без поддержки вспомогательных технологий):

<!-- Классы navbar и navbar-default (базовые классы меню) -->
<nav class="navbar navbar-default">
  <!-- Контейнер (определяет ширину Navbar) -->
  <div class="container-fluid">
    <!-- Заголовок -->
    <div class="navbar-header">
      <!-- Кнопка «Гамбургер» отображается только в мобильном виде (предназначена для открытия основного содержимого Navbar) -->
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-main">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <!-- Бренд или название сайта (отображается в левой части меню) -->
      <a class="navbar-brand" href="#">Brand</a>
    </div>
    <!-- Основная часть меню (может содержать ссылки, формы и другие элементы) -->
    <div class="collapse navbar-collapse" id="navbar-main">
      <!-- Содержимое основной части -->
    </div>
  </div>
</nav>

Работа с меню в основном заключается в наполнении её содержимого (элемента с классом navbar-collapse).

Добавление в меню ссылок и выпадающего списка

Добавление ссылок в меню осуществляется следующим образом:

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Заголовок -->
    <div class="navbar-header">
      ...
    </div>
    <!-- Основная часть меню (может содержать ссылки, формы и другие элементы) -->
    <div class="collapse navbar-collapse" id="navbar-main">
      <!-- Содержимое основной части -->

      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Ссылка 1</a></li>
        <li><a href="#">Ссылка 2</a></li>
        <li><a href="#">Ссылка 3</a></li>
        <li><a href="#">Ссылка 4</a></li>
        <li><a href="#">Ссылка 5</a></li>
      </ul>
      
    </div>
  </div>
</nav>

Класс active предназначен для подсвечивания активного пункта меню.

Добавление выпадающего списка в меню:

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Заголовок -->
    <div class="navbar-header">
      ...
    </div>
    <!-- Основная часть меню (может содержать ссылки, формы и другие элементы) -->
    <div class="collapse navbar-collapse" id="navbar-main">
      <!-- Содержимое основной части -->

      <ul class="nav navbar-nav">
      
        <!-- Ссылки -->        
        <li class="active"><a href="#">Ссылка 1</a></li>
        <li><a href="#">Ссылка 2</a></li>
        <li><a href="#">Ссылка 3</a></li>
        <li><a href="#">Ссылка 4</a></li>
        <li><a href="#">Ссылка 5</a></li>

        <!-- Выпадающий список -->
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Раздел <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Ссылка</a></li>
            <li><a href="#">Ссылка</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Ссылка</a></li>
          </ul>
        </li>

      </ul>
      
    </div>
  </div>
</nav>

Добавления разделителя между пунктами в выпадающем меню осуществляется посредством добавления элемента li с классом divider:

<li role="separator" class="divider"></li>  

Добавим в меню ещё блок, содержащий ссылку и выпадающий список, но расположенный справа:

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Заголовок -->
    <div class="navbar-header">
      ...
    </div>
    <!-- Основная часть меню (может содержать ссылки, формы и другие элементы) -->
    <div class="collapse navbar-collapse" id="navbar-main">
      <!-- Содержимое основной части -->

      <ul class="nav navbar-nav">
        ...
      </ul>

      <!-- Блок, расположенный справа -->
      <ul class="nav navbar-nav navbar-right">
        <!-- Ссылка -->        
        <li><a href="#">Ссылка</a></li>
          <!-- Выпадающий список -->
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Раздел <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Ссылка</a></li>
            <li><a href="#">Ссылка</a></li>
          </ul>
        </li>
      </ul>

    </div>
  </div>
</nav>

Назначение атрибутов и классов (как работает схлопывание меню)

Кнопка «Гамбургер» отображается только в мобильной версии и предназначена для открытия основной части меню. Указание элемента (основной части) осуществляется посредством атрибута data-target.

Значение атрибута data-target кнопки "Гамбургер" должно указывать на элемент, представляющий собой основной контент горизонтального меню Bootstrap Navbar
 

Кроме атрибута data-target и связанным с ним id, в меню Navbar используются и много других сущностей. Они играют роль селекторов, с помощью которых к элементам меню добавляются стили (CSS) и логика (JavaScript).

Например, у кнопки «Гамбургер» атрибут data-toggle="collapse" предназначен для того, чтобы JavaScript его инициализировал как Collapse. После инициализации эта кнопка может переключать видимость элемента, указанного в data-target.

Кроме этого, JavaScript, в зависимости от состояния меню, добавляет и к другим элементам различные классы.

Один из этих классов – это collapsed. Он присутствует у кнопки «Гамбургер», когда меню находится в свёрнутом (не в открытом) состоянии.

Для элемента, в котором отображается основной контент, логика JavaScript устанавливает определённый класс (классы) из следующего списка:

  • collapse (скрыт);
  • collapsing (находится в процессе открытия или закрытия);
  • collapse и in (открыт).

Поддержка вспомогательных технологий

HTML-структура Bootstrap меню Navbar с поддержкой вспомогательных технологий:

<!-- Классы navbar и navbar-default -->
<nav class="navbar navbar-default">
  <!-- Контейнер -->
  <div class="container-fluid">
    <!-- Заголовок -->
    <div class="navbar-header">
      <!-- Кнопка «Гамбургер» -->
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-main" 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 class="navbar-brand" href="#">Brand</a>
    </div>
    <!-- Основная часть меню -->
    <div class="collapse navbar-collapse" id="navbar-main">
    
      <!-- Содержимое основной части -->
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Ссылка 1 <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Ссылка 2</a></li>
        <li><a href="#">Ссылка 3</a></li>
        <li><a href="#">Ссылка 4</a></li>
        <li><a href="#">Ссылка 5</a></li>
        <!-- Выпадающий список -->
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Раздел <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Ссылка</a></li>
            <li><a href="#">Ссылка</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Ссылка</a></li>
          </ul>
        </li>
      </ul>
      
    </div>
  </div>
</nav>

В вышеприведённом примере разметка блока Navbar представлена с использованием ARIA атрибутов и класса sr-only. Данные сущности предназначены для того, чтобы сделать горизонтальное меню более доступным для программ чтения экрана.

Класс sr-only предназначен для скрытия контента на всех устройствах, кроме программ Screen Readers. Т.е. содержимое нижеприведённых элементов будет доступно только им:

<span class="sr-only">Toggle navigation</span>
<span class="sr-only">(current)</span>

При чтении HTML страницы пользователь не поймёт что это за элемент, если к нему не добавить поясняющий текст. Например, фраза Toggle Navigation поясняет, что с помощью этого элемента осуществляется переключение навигации.

Кстати, если ваша аудитория является русскоговорящей и пользователь не знает английского языка, то он и в этом случае может не понять назначение элемента.

Поэтому для русскоговорящей аудитории текст желательно указывать так:

<span class="sr-only">Кнопка, для переключения навигации</span>
<span class="sr-only">(текущая)</span>

Атрибут role предназначен для того, чтобы указать назначение того или иного элемента:

  • role="navigation" – содержит навигацию;
  • role="button" – элемент, на который можно кликнуть.

Атрибуты, начинающиеся с aria, предназначены для описания элементов и их состояния:

  • aria-expanded – сообщает, развёрнут или свёрнут элемент;
  • aria-haspopup – сообщает, что элемент имеет подменю или контекстное меню.

Если вам не нужна поддержка вспомогательных технологий, то данные сущности при создании меню можно не использовать.

Использование в качестве бренда изображения

В качестве бренда можно использовать не только текст, но и изображение (img).

<a class="navbar-brand" href="/">
  <img src="/navbar-brand.svg" height="36" alt="Название бренда или сайта">
</a>

При установке изображения придётся немного подкорректировать класс navbar-brand. А именно в зависимости от высоты изображения изменить значение padding отступов.

Например, для изображения, имеющего высоту 36px, в качестве значений отступов padding-top и padding-bottom необходимо установить следующее:

/* 50px - 36px = 14px
   14px / 2 = 7px
   50px - высота меню Navbar по умолчанию */
.navbar-brand {
  padding-top: 7px;
  padding-bottom: 7px;
}

Вставка формы в меню

Помещение формы в меню осуществляется посредством добавления к ней класса navbar-form:

<form class="navbar-form navbar-left" role="search">
  <div class="form-group">
    <input type="text" class="form-control" placeholder="Search">
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>  

Класс navbar-form необходим для того, чтобы обеспечить правильное позиционирование формы внутри меню.

Некоторым элементам управления формы, например, таким как группа кнопок, может потребоваться установка фиксированной ширины для того, чтобы обеспечить их правильное отображение внутри компонента Navbar.

Вставка кнопки в меню

Вставка в меню кнопки, расположенной вне формы, осуществляется посредством добавления к ней дополнительного класса navbar-btn.

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

Класс navbar-btn может применяться к элементам a и input.

Вставка текста в меню

Для того чтобы в меню поместить некоторый текст, его необходимо обернуть с помощью элемента p и добавить к нему класс navbar-text.

<p class="navbar-text">Вошли как Тимофей</p>

Ссылки вне элемента nav

Для использования стандартных ссылок вне специально предназначенного для этого элемента, к ним необходимо добавить класс navbar-link.

<p class="navbar-text navbar-right">Вошли как <a href="#" class="navbar-link">Тимофей;/a></p>

Выравнивание элементов внутри меню

Выравнивание ссылок, форм, кнопок и текста в меню осуществляется с помощью добавления к ним класса navbar-left или navbar-right. Эти классы выравнивают элемент соответственно по левому или по правому краю. Осуществляют они это действие посредством установки элементу CSS-свойства float со значением left или right.

В отличие от классов pull-left и pull-right, они делают это только для десктопной версии горизонтального меню Navbar.

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

<ul class="nav navbar-nav navbar-right">
  ...
</ul>

Управление видимостью элементов меню на устройствах

В Bootstrap 3 имеется набор адаптивных классов (например, hidden-xs, hidden-sm, hidden-md, hidden-lg), с помощью которых можно очень просто скрыть отображения элемента на определённых устройствах.

Например, скроем отображения элемента в меню на маленьких (sm) и средних (md) экранах.

<ul class="nav navbar-nav navbar-right hidden-sm hidden-md">
  <li><a href="#">Ссылка 6</a></li>
  <li><a href="#">Ссылка 7</a></li>
</ul>

Фиксированное (плавающее) меню

Bootstrap 3 предоставляет классы, с помощью которых вы можете прикрепить (зафиксировать) меню при прокрутке странице к её верхней или нижней части.

Прикрепление к верхней части страницы

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

<!-- Класс navbar-fixed-top прикрепляет меню к верхней части страницы -->
<nav class="navbar navbar-default navbar-fixed-top">
  <!-- Элемент с классом container или container-fluid необходим для центрирования и установки необходимых отступов слева и справа для контента -->
  <div class="container">
    ...
  </div>
</nav>

Содержимое горизонтального меню помещайте внутрь контейнера с классом container или container-fluid. Это обеспечит центрирование меню и установку необходимых отступов слева и справа для его контента.

Для того чтобы верхнее фиксированное меню не накладывалась на контент страницы необходимо для элемента body добавить CSS свойство padding-top (высота меню Navbar по умолчанию равна 50px):

body {
  padding-top: 70px;
}

Данное правило необходимо включить в свой файл CSS. Этот файл должен быть подключен после Bootstrap CSS.

Кроме этого, из-за того что у нас основной контент сдвинут, переход к определённому месту страницы, посредством якоря, будет выполняться не корректно. Чтобы это исправить, в CSS необходимо добавить следующий код:

:target:before { 
  display: block; 
  content: " "; 
  margin-top: -70px; 
  height: 70px; 
  visibility: hidden; 
}

Меню, прикрепленное к нижней части страницы

Прикрепление меню к нижней части страницы осуществляется посредством добавления к нему дополнительного класса navbar-fixed-bottom.

<nav class="navbar navbar-default navbar-fixed-bottom">
  <div class="container">
    ...
  </div>
</nav>

Чтобы нижнее фиксированное меню не накладывалась на контент страницы необходимо для элемента body добавить следующее CSS правило:

body {
  padding-bottom: 70px;
}

Неподвижное верхнее горизонтальное меню

При расположении обычного (прокручиваемого) меню в верхней части страницы к нему желательно добавить класс navbar-static-top.

<nav class="navbar navbar-default navbar-static-top">
  <div class="container">
    ...
  </div>
</nav>

Данный класс (navbar-static-top) :

  • убирает радиусы (border-radius: 0);
  • удаляет левую, правую и верхнюю границу у меню (border-width: 0 0 1px).

Меню, имеющее тёмные цвета

Фреймворк Bootstrap предоставляет класс navbar-inverse, с помощью которого вы можете установить меню тёмный стиль (инвертированный по отношению к navbar-default).

<nav class="navbar navbar-inverse">
  ...
</nav>
Горизонтальное меню Bootstrap в тёмном стиле
Горизонтальное меню Bootstrap в тёмном стиле

Как изменить точку переключения navbar

Самый простой способ изменить точку переключения (значение переменной @grid-float-breakpoint) – это создать свою сборку Bootstrap на странице Customize.

Способ изменения точки схлопывания меню с помощью CSS (без создания своей сборки):

@media (max-width: 899px) {
  .navbar-header {
    float: none;
  }
  .navbar-left,.navbar-right {
    float: none !important;
  }
  .navbar-toggle {
    display: block;
  }
  .navbar-collapse {
    border-top: 1px solid transparent;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
  }
  .navbar-fixed-top {
    top: 0;
    border-width: 0 0 1px;
  }
  .navbar-collapse.collapse {
    display: none!important;
  }
  .navbar-nav {
    float: none!important;
    margin-top: 7.5px;
  }
  .navbar-nav>li {
    float: none;
  }
  .navbar-nav>li>a {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .collapse.in{
    display:block !important;
  }
  .container-fluid>.navbar-collapse, .container-fluid>.navbar-header, .container>.navbar-collapse, .container>.navbar-header {
    margin-right: -15px;
    margin-left: -15px;
  }
}  

Для того чтобы создать не схлопывающееся меню можно воспользоваться вышеприведённым решением, но назначить в качестве значения переменной @grid-float-breakpoint значение 320px (минимальную ширину экрана устройства).

Как зафиксировать меню при прокрутке

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

<body>
  <!-- Блок до меню Navbar (например, логотип) -->
  <div style="height: 90px;">...</div> 
  <!-- Горизонтальное меню Navbar -->
  <nav class="navbar navbar-default navbar-static-top" style="position: -webkit-sticky; position: sticky; top: 0;">
    ...
  </nav>
</body>

Но данное решение не работает в браузерах IE и Edge. Если нужна их поддержка всех браузеров, то можно воспользоваться плагином Bootstrap 3 Affix.

<body>
  <!-- Блок до меню Navbar (например, логотип) -->
  <div style="height: 90px;">...</div> 
  <!-- Горизонтальное меню Navbar -->
  <nav class="navbar navbar-default navbar-static-top" data-spy="affix" data-offset-top="90">
    ...
  </nav>
</body>

CSS (стили для откреплённого меню, т.е. находящегося в состоянии affix):

.navbar.affix {
  top:0;
  width:100%;
}

Bootstrap Navbar - Анимация кнопки меню

Примеры кода, с помощью которых вы можете «оживить» кнопку «Гамбургер».

1 вариант (анимация в иконку закрытия):

.navbar-toggle {
  border: none;
  background: transparent !important;
}
.navbar-toggle:hover {
  background: transparent !important;
}
.navbar-toggle .icon-bar {
  width: 22px;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
.navbar-toggle .icon-bar:nth-of-type(1) {
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transform-origin: 10% 10%;
  -ms-transform-origin: 10% 10%;
  transform-origin: 10% 10%;
}
.navbar-toggle .icon-bar:nth-of-type(2) {
  opacity: 0;
  filter: alpha(opacity=0);
}
.navbar-toggle .icon-bar:nth-of-type(3) {
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-transform-origin: 10% 90%;
  -ms-transform-origin: 10% 90%;
  transform-origin: 10% 90%;
}
.navbar-toggle.collapsed .icon-bar:nth-of-type(1) {
  -webkit-transform: rotate(0);
  -ms-transform: rotate(0);
  transform: rotate(0);
}
.navbar-toggle.collapsed .icon-bar:nth-of-type(2) {
  opacity: 1;
  filter: alpha(opacity=100);
}
.navbar-toggle.collapsed .icon-bar:nth-of-type(3) {
  -webkit-transform: rotate(0);
  -ms-transform: rotate(0);
  transform: rotate(0);
}

2 вариант (анимация в стрелочку, направленную вверх):

.navbar-toggle {
  border: none;
  background: transparent !important;
}
.navbar-toggle:hover {
  background: transparent !important;
}
.navbar-toggle .icon-bar {
  width: 22px;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
.navbar-toggle.collapsed .icon-bar:nth-of-type(1) {
  transform: translate3d(0,0,0) rotate(0deg);
  width: 22px;
}
.navbar-toggle.collapsed .icon-bar:nth-of-type(2) {
  transform: translate3d(0,0,0) rotate(0deg);
}
.navbar-toggle.collapsed .icon-bar:nth-of-type(3) {
  transform: translate3d(0,0,0) rotate(0deg);
  width: 22px;
}
.navbar-toggle .icon-bar:nth-of-type(1) {
  transform: translate3d(1px,0,0) rotate(-45deg);
  transform-origin: center center;
  width: 11px;
}
.navbar-toggle .icon-bar:nth-of-type(2) {
  transform: rotate(-90deg);
  transform-origin: center center;
}
.navbar-toggle .icon-bar:nth-of-type(3) {
  transform: translate3d(0px,-14px,0) rotate(-135deg);
  transform-origin: right top;
  width: 11px;
}

Изменение максимальной высоты collapsed блока

В Bootstrap 3 по умолчанию максимальная высота выпадающего (collapsed) блока (в мобильном виде) равна 340px.

.navbar-collapse {
  max-height: 340px;
}

Если вы хотите данное значение устанавливать динамически, т.е. в зависимости от высоты устройства, то можно воспользоваться следующим скриптом (для верхнего фиксированного меню Navbar):

$(function() {
  $('.navbar-collapse').css({ 
    maxHeight: $(window).height() - $('.navbar-header').height() + 'px'
  });
});

Если необходимо с учётом возможного изменения экрана, то так:

$(function() {
  var changeHeightNavbarCollapse = function() {
    $('.navbar-collapse').css({ 
      maxHeight: $(window).height() - $('.navbar-header').height() + 'px'
    });
  };

  changeHeightNavbarCollapse();

  $(window).resize(function() {
    if (window.innerWidth <= 768) {
      changeHeightNavbarCollapse();
    }
  });

});

Пример, как collapsed блок можно развернуть на всю высоту устройства (для верхнего фиксированного меню Navbar):

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      ...
    </div>
    <div class="collapse navbar-collapse" id="navbar-main">
      <!-- имеет margin-top и margin-bottom, равные 7.5px -->
      <ul class="nav navbar-nav">
        ...
      </ul>
    </div>
  </div>
</nav>
...
<script>
$(function(){
  var changeHeightNavbarCollapse = function() {
    if (window.innerWidth < 768) {
      $('.navbar-collapse').css({ 
        maxHeight: $(window).height() - $('.navbar-header').height() + 'px' 
      });
      $('.navbar-collapse .navbar-nav').css({ 
        height: $(window).height() - $('.navbar-header').height() - 16 + 'px'
      });
    } else {
      $('.navbar-collapse .navbar-nav').css({ 
        height: 'auto'
      });  
    }
  };
  changeHeightNavbarCollapse();
  $(window).resize(function(){
    changeHeightNavbarCollapse();
  });
});
</script>

Горизонтальное меню для навигации по странице

Пример создания меню для одностраничного сайта с подсветкой текущего пункта (с использованием компонента ScrollSpy):

<body data-spy="scroll" data-target="#navbar-main" data-offset="90" style="padding-top:70px;">

  <!—Фиксированное горизонтальное меню для навигации по текущей странице -->
  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-main" aria-expanded="false">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Brand</a>
      </div>
      <div class="collapse navbar-collapse" id="navbar-main">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#href1">Ссылка 1 <span class="sr-only">(current)</span></a></li>
          <li><a href="#href2">Ссылка 2</a></li>
          <li><a href="#href3">Ссылка 3</a></li>
          <li><a href="#href4">Ссылка 4</a></li>
          <li><a href="#href5">Ссылка 5</a></li>
        </ul>
      </div>
    </div>
  </nav>
  
  <!--Основной контент страницы -->
  <main>
    <div class="container-fluid">
      ...
      <h1>Название страницы</h1>
      ...
      <h2 id="href1">Заголовок 1</h2>
      ...
      <h2 id="href2">Заголовок 2</h2>
      ...
      <h2 id="href3">Заголовок 3</h2>
      ...
      <h2 id="href4">Заголовок 4</h2>
      ...
      <h2 id="href5">Заголовок 5</h2>
      ...
    </div>    
  </main>
  ...
</body>

Дополнительно на страницу необходимо ещё поместить скрипт, который будет в мобильном виде при нажатии на ссылку закрывать collapsed блок:

//при нажатии на ссылку
$(".navbar-collapse a").click(function() {
  //если она не имеет класс dropdown-toggle
  if (!$(this).hasClass("dropdown-toggle")) {
    //то закрыть меню
    $(".navbar-collapse").collapse('hide');
  }
});

Navbar - Открытие dropdown меню при наведении

Сценарий JavaScript, с помощью которого можно изменить способ открытия выпадающих списков в десктопной версии меню Navbar (при наведении):

$(function() {
  function onNavbar() {
    if (window.innerWidth >= 768) {
      $('.navbar-default .dropdown').on('mouseover', function(){
        $('.dropdown-toggle', this).next('.dropdown-menu').show();
      }).on('mouseout', function(){
        $('.dropdown-toggle', this).next('.dropdown-menu').hide();
      });
      $('.dropdown-toggle').click(function() {
        if ($(this).next('.dropdown-menu').is(':visible')) {
          window.location = $(this).attr('href');
        }
      });
    } else {
      $('.navbar-default .dropdown').off('mouseover').off('mouseout');
    }
  }
  $(window).resize(function() {
    onNavbar();
  });
  onNavbar();
});

Установка активного пункта меню с помощью JavaScript

Подсветку активного пункта (установку ему класса active) можно выполнять не только на стороне сервера, но и на клиенте (в браузере) с помощью следующего сценария JavaScript:

$(function() {
  // путь текущей страницы
  var pathPage = location.pathname.slice(1);
  var parentUl = $('.navbar-nav a[href*='+pathPage']').closest('li').addClass('active').parent('ul');
  if (parent.closest('.navbar-nav li').length) {
    parentUl.closest('li').addClass('active');
  }
});

Изменение высоты Navbar

Наиболее простой способ изменить высоту – это собрать свою сборку. За высоту меню Navbar отвечает переменная @navbar-height.

Другой вариант – это переопределить существующие стили (CSS):

.navbar {
  min-height: 80px;
}
.navbar-brand {
  padding: 0 15px;
  height: 80px;
  line-height: 80px;
}
.navbar-toggle {
  /* (80px - высота кнопки 34px) / 2 = 23px */
  margin-top: 23px;
  padding: 9px 10px !important;
}
@media (min-width: 768px) {
  .navbar-nav > li > a {
    /* (80px - line-height 27px) / 2 = 26.5px */
    padding-top: 26.5px;
    padding-bottom: 26.5px;

 

Разметка навигационных цепочек

Навигационные цепочки («хлебные крошки», breadcrumbs) - это схема навигации, которая показывает текущее положение пользователя на сайте. Они применяются для отображения иерархически-организованной информации. Например, в интернет-магазине "хлебные крошки" обычно представляют собой цепочки разделов. С их помощью пользователь может определить, в каком разделе он находится сейчас, а также они позволяют перейти на разделы более высоких уровней, т.е. предоставляют ещё одну возможность навигации по структуре сайта.

"Хлебные крошки" в Bootstrap – это обычный упорядоченный список с классом breadcrumbs. Разделитель элементов списка автоматически добавляется с помощью CSS (bootstrap.min.css) через следующий класс:

.breadcrumbs > li + li:before {
color: #cccccc;
content: "/";
padding: 0 5px;
}

Пример создания "хлебных крошек" с помощью Bootstrap.

<ol class="breadcrumb">
  <li class="active">Главная</li>
</ol>

<ol class="breadcrumb">
  <li><a href="#">Главная</a></li>
  <li class="active">Процессоры</li>
</ol>

<ol class="breadcrumb">
  <li><a href="#">Главная</a></li>
  <li><a href="#" >Процессоры</a></li>
  <li class="active">Intel</li>
</ol>
Оформление навигационных цепочек в Bootstrap
 

Ещё один пример:

<ol class="breadcrumb">
  <li><a href="#">Главная</a></li>
  <li><a href="#">2013</a></li>
  <li class="active">Ноябрь</li>
</ol>
Хлебные крошки для навигации по архивной информации
 

Не стандартный вариант оформления хлебных крошек

Рассмотрим пример создания следующего варианта оформления хлебных крошек:

Пример оформления хлебных крошек на сайте
 

Но перед тем как переходить к их разработке, желательно убрать из Bootstrap стандартные стили компонента Breadcrumbs. Это действие позволит уменьшить размер CSS файла Bootstrap.

Процесс создания хлебных крошек складывается из разработки HTML структуры и стилей (CSS).

CSS хлебных крошек:

/* хлебные крошки */
#breadcrumb {
  list-style: none;
  display: inline-block;
  padding-left: 0px;
}
#breadcrumb .icon {
  font-size: 14px;
}
#breadcrumb li {
  float: left;
}
#breadcrumb li a {
  color: #fff;
  display: block;
  background: #cc2eaa;
  text-decoration: none;
  position: relative;
  height: 34px;
  line-height: 34px;
  padding: 0 10px 0 5px;
  text-align: center;
  margin-right: 23px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;  
}
#breadcrumb li:first-child a {
  padding-left: 15px;
  -moz-border-radius: 4px 0 0 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px 0 0 4px;
}
#breadcrumb li:first-child a:before {
  border: none;
}
#breadcrumb li:last-child a {
  padding-right: 15px;
  -moz-border-radius: 0 4px 4px 0;
  -webkit-border-radius: 0;
  border-radius: 0 4px 4px 0;
}
#breadcrumb li:last-child a:after {
  border: none;
}
#breadcrumb li a:before, #breadcrumb li a:after {
  content: "";
  position: absolute;
  top: 0;
  border: 0 solid #cc2eaa;
  border-width: 17px 10px;
  width: 0;
  height: 0;
}
#breadcrumb li a:before {
  left: -20px;
  border-left-color: transparent;
}
#breadcrumb li a:after {
  left: 100%;
  border-color: transparent;
  border-left-color: #cc2eaa;
}
#breadcrumb li a:hover {
  background-color: #a22587;
}
#breadcrumb li a:hover:before {
  border-color: #a22587;
  border-left-color: transparent;
}
#breadcrumb li a:hover:after {
  border-left-color: #a22587;
}
#breadcrumb li a:active {
  background-color: #a22587;
}
#breadcrumb li a:active:before {
  border-color: #a22587;
  border-left-color: transparent;
}
#breadcrumb li a:active:after {
  border-left-color: #a22587;
}
#breadcrumb li.current a {
  pointer-events: none;
  cursor: not-allowed;
  filter: alpha(opacity=65);
  -webkit-box-shadow: none;
  box-shadow: none;
  opacity: .65;
}

Изменения цвета производится посредством редактирования значений соответствующих CSS свойств.

HTML разметка:

<ol id="breadcrumb">
  <li>
    <a href="#"><i class="glyphicon glyphicon-home"></i>
    <span class="sr-only">Главная</span></a>
  </li>
  <li>
    <a href="#">Комплектующие</a>
  </li>
  <li>
    <a href="#">Процессы</a>
  </li>
  <li class="current">
    <a href="#">Intel</a>
  </li> 
</ol>

Выделение текущего элемента (если он будет использоваться в цепочке) осуществляется с помощью добавления к элементу li класса current. Ну на сегодня все а в следующей статье я расскажу как создать блоки типа аккордеон на сайте с помощью Бутстрап 3.

 

Прочитано 1557 раз Последнее изменение Вторник, 25 июля 2017 12:03
Другие материалы в этой категории:
Понравилась запись? Подпишитесь на обновления по почте:

TemplateMonster

Поиск по сайту

Связной трэвел

tezeks

Google+