2 урок. Навигационное меню

Автор: | 11.11.2016
Нет комментариев

Какие стили нужно использовать для создания меню с использованием  Bootstrap?

Как же создать самое простое меню в Bootstrap?

Алгоритм создания меню.

  1. Использовать тег <NAV> для объявления меню.
  2. Разместить в нем тег <DIV> к которому применить класс conatainer для отображения меню внутри контейнера. Это позволит корректно отображать меню.
  3. Разместить в контейнере заголовок сайта с текстовым описанием или логотипом. Использовать класс navbar-header.
  4. Использовать список <UL> и элементы списка <LI> для отображения пунктов меню.

Меню необходимо разместить в теге <nav> К которому применены стили navbar navbar-default. Эти классы зададут

<nav class=»navbar navbar-default»>

Давайте разберемся зачем нужны эти классы.

Класс navbar-default задает серый фоновый цвет и бордюр который немного темнее фона.

ss-2016-10-03-at-11-50-34

Класс navbar управляет отступами и задает позиционирование меню на экране. Так же минимальную высоту.

ss-2016-10-03-at-11-50-44

Дальнейшее содержание меню помещается в class conatainer который мы изучали на прошлом уроке.

Разместим заголовок сайта справа от меню

  1. <div class=«navbar-header»>
  2. <a class=«navbar-brand» href=«#»>Создаем меню.</a>
  3. </div>

 

Класс navbar-header  разрешает обтекание что позволяет размещать пункты меню справа от названия сайта.

ss-2016-10-03-at-12-05-38

Класс navbar-brand задает цвет шрифта высоту линии и отступы.

ss-2016-10-03-at-12-07-28

Теперь приступим к размещению пунктов меню.

  1. <ul class=«nav navbar-nav»>
  2. <li class=«active»><a href=«#»>Главная</a></li>
  3. <li><a href=«#»>Странциа 1</a></li>
  4. <li><a href=«#»>Странциа 2</a></li>
  5. <li><a href=«#»>Странциа 3</a></li>
  6. </ul>

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

Полный код созданного меню.

  1. <!DOCTYPE html>
  2. <html lang=«ru»>
  3. <head>
  4. <meta charset=«utf-8»>
  5. <meta name=«viewport» content=«width=device-width, initial-scale=1»>
  6. <link href=«css/bootstrap.min.css» rel=«stylesheet»>
  7. </head>
  9. <body>
  10. <nav class=«navbar navbar-default»>
  11. <div class=«container»>
  12. <div class=«navbar-header»>
  13. <a class=«navbar-brand» href=«#»>Создаем меню.</a>
  14. </div>
  15. <ul class=«nav navbar-nav»>
  16. <li class=«active»><a href=«#»>Главная</a></li>
  17. <li><a href=«#»>Странциа 1</a></li>
  18. <li><a href=«#»>Странциа 2</a></li>
  19. <li><a href=«#»>Странциа 3</a></li>
  20. </ul>
  21. </div>
  22. </nav>
  23. <div class=«container»>
  24. <h1>Наше первое меню для сайта.</h1>
  25. </div>
  26. </body>
  27. </html>

Результат отображения меню в

ss-2016-10-03-at-12-10-57

Протестируйте ваше меню на мобильных устройствах. Меню при уменьшении ширины экрана сворачивается в один столбец и выглядит вполне удобным на мобильных устройствах.

ss-2016-10-03-at-12-14-18

Отлично. Мы научились создавать простое меню для нашего сайта.

Инвертированная цветовая схема для меню.

Если вашему сайту необходимо использовать темные цвета. То вы можете заменить класс

navbar-default

класс на

.navbar-inverse:

ss-2016-10-03-at-12-18-58

В результате ваше меню станет намного темнее. Теперь нам доступны две цветовые схемы для создания меню.

Фиксация меню.

Для фиксации меню в верхней части экрана существует класс .navbar-fixed-top.

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

Применив один из этих стилей к тегу Nav мы зафиксируем меню в выбранной части экрана.

<nav class=»navbar navbar-inverse navbar-fixed-top»>

или

<nav class=»navbar navbar-inverse navbar-fixed-bottom»>

Давайте протестируем наше меню с классом navbar-fixed-bottom.

ss-2016-10-03-at-12-25-22

В результате как вы видите меню переместилось в нижнюю часть браузера.

Создание выпадающего меню.

Давайте научимся создавать выпадающие меню.

Алгоритм создания выпадающего меню.

  1. Применяем к пункту меню содержащему подпункты класс dropdown.
  2. Помечаем пункт меню стрелочкой вниз чтобы дать понять пользователю, что он содержит подпункты.
  3. Внутри тега <LI> выбранного пункта меню размещаем список <ul> с  подпунктами.
  4. Применяем к списку подменю класс  dropdown-menu.

Итоговый код:

  1. <li class=«dropdown»>
  2. <a class=«dropdown-toggle» data-toggle=«dropdown» href=«#»>Страница 1
  3. <span class=«caret»></span></a>
  4. <ul class=«dropdown-menu»>
  5. <li><a href=«#»>Страница 1—1</a></li>
  6. <li><a href=«#»>Страница 1—2</a></li>
  7. <li><a href=«#»>Страница 1—3</a></li>
  8. </ul>
  9. </li>

Обратите внимание, что мы добавили новый атрибут

  1. data-toggle=«dropdown»

Нестандартные атрибуты используются плагинами. Соответственно нам нужно подключить скрипт который содержит плагины Bootstrap. Для подключения плагина нам нужно два файла jquery.min.js и bootstrap.min.js. Вы уже знаете что min файлы это минифицированные файлы из которых убрали все лишние символы.

Алгоритм подключения плагина к сайту.

  1. Создайте папку js внутри папки в которой вы работаете.
  2. Откройте в коне браузера ссылку https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js
  3. Создайте в папке js текстовый файл jquery.min.js
  4. Скопируйте содержимое браузера в этот файл и сохраните его.
  5. Откройте в браузере ссылку https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js
  6. Создайте в папке js текстовый файл bootstrap.min.js  и создайте скопируйте в него содержимое браузера.
  7. Сохраните файл.

Мы только что использовали CDN — coontent delivery network для копирования плагинов на свой сайт.

Подключение плагинов осуществляется в любом месте внутри тега <head>

Вот код для подключения плагина.

<script src=»js/jquery.min.js»></script>
<script src=»js/bootstrap.min.js»></script>

Плагины написаны с использованием javascript и jquery которые мы будем изучать позже.

Давайте проверим работает ли выпадающее меню.

ss-2016-10-03-at-12-50-29

Отлично у нас получилось выпадающее меню.

Протестируйте как будет отображаться меню в мобильной версии.

ss-2016-10-03-at-12-52-22

Меню отлично работает и в мобильной версии.

Размещаем пункты меню с правой стороны.

Обычно на сайтах с правой стороны размещаются пункты меню которые позволяют войти пользователю в личный кабинет или зарегистрироваться. Так же там может располагаться пункт меню «о нас» который содержит  контактные данные.

Давайте приступим к созданию пункта меню в правой части экрана.

Для этого нам понадобится создать отдельное меню с классом navbar-right, как показано на примере ниже.

  1. <ul class=«nav navbar-nav navbar-right»>
  2. <li><a href=«#»><span class=«glyphicon glyphicon-user»></span> Регистрация</a></li>
  3. <li><a href=«#»><span class=«glyphicon glyphicon-log-in»></span> Вход</a></li>
  4. </ul>

Как вы обратили внимание мы использовали новые классы внутри тега <span>

  1. <span class=«glyphicon glyphicon-user»></span>

Тек <span>с классом glyphicon позволяет добавлять стандартные иконки на наш сайт интегрированные в Bootstrap.

Для просмотра стандартных иконок вы может воспользоваться ссылкой

http://getbootstrap.com/components/

Для корректного отображения иконок, нам необходимо скачать все файлы пройдя по ссылке и

http://getbootstrap.com/getting-started/#download

Из скаченного архива вам необходимо скопировать папку fonts в ту папку где хранится ваш сайт.

Давайте проверим получилось ли у нас меню?

ss-2016-10-03-at-01-16-45

Отлично правое меню у нас на сайте.

Мобильная версия меню.

Последний штрих при разработке меню это добавление эффекта сворачивания в мобильной версии. По английски collapse menu.

Давайте разберем элементы которые нам необходимы для создания мобильной версии меню.

Кнопка которая будет отображаться только в мобильной версии

  1. <button type=«button» class=«navbar-toggle» data-toggle=«collapse» data-target=«#myNavbar»>
  2. <span class=«icon-bar»></span>
  3. <span class=«icon-bar»></span>
  4. <span class=«icon-bar»></span>
  5. </button>

Эта кнопка состоит из трех полосок и для их создания мы используем

  1. <span class=«icon-bar»></span>

Для того чтобы управлять меню нам необходимо подключить плагин.

  1. <script src=«js/jquery.min.js»></script>
  2. <script src=«js/bootstrap.min.js»></script>

Navbar на компьютерах

Так выглядит navbar на компьютерах все элементы присутствуют

navbar1

Navbar на мобильных устройствах

Так выглядит navbar на мобильных устройствах все элементы прячутся и появляются по нажатию на кнопку

navbar2

Navbar может быть:

  • Зафиксирован сверху — при прокрутке navbar всегда будет сверху
  • Зафиксирован снизу — при прокрутке navbar всегда будет снизу

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

<nav class="navbar navbar-default navbar-fixed-top"><!--navbar-inverse-->
<div class="container">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span> 
     </button>
    <div class="navbar-brand"><a href="index.html">Logo</a></div>
  </div>
  <div class="collapse navbar-collapse" id="myNavbar">
  <ul class="nav navbar-nav">
    <li class="active"><a href="">menu</a></li>
    <li><a href="">menu</a></li>
    <li><a href="">menu</a></li>
    <li><a href="">menu</a></li>
    <li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="">menu<span class="caret"></span></a>
      <ul class="dropdown-menu">
        <li><a href="">menu</a></li>
        <li><a href="">menu</a></li>
        <li><a href="">menu</a></li>
      </ul>
    </li>
  </ul>
   <ul class="nav navbar-nav navbar-right">
      <li><a href="#"><span class="glyphicon glyphicon-user"></span> Регистрация</a></li>
      <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Войти</a></li>
  </ul>
  </div>
</div>
 </nav>

 

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <!-- Название компании и кнопка, которая отображается для мобильных устройств группируются для лучшего отображения при свертывании -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <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="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <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>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

Резиновостью navbar можно управлять меняя значение класса.

01
<div class="container-fluid">

Можно вместо container-fluid поставить просто container, тогда navbar не будет растягиваться на всю ширину экрана,а примет ширину container по-умолчанию. Максимальная ширина container составляет 1170px

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

01
02
03
04
05
06
07
08
09
<div class="navbar-header">
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
    <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>

Следующий код хранит в себе элементы navbar.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!-- Группируем ссылки, формы, выпадающее меню и прочие элементы -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  <ul class="nav navbar-nav">
    <li class="active"><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
      <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li><a href="#">Separated link</a></li>
        <li class="divider"></li>
        <li><a href="#">One more separated link</a></li>
      </ul>
    </li>
  </ul>
  <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>
  <ul class="nav navbar-nav navbar-right">
    <li><a href="#">Link</a></li>
    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
      <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li><a href="#">Separated link</a></li>
      </ul>
    </li>
  </ul>
</div><!-- /.navbar-collapse -->

В мобильных устройствах все эти элементы мы будем видеть по нажатию на кнопку

navbar5

Для того чтобы в мобильных версиях по нажатию кнопоки отображались элементы нужно чтобы совпадали следующие id

navbar4

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

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
<ul class="nav navbar-nav">
    <li class="active"><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
      <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li><a href="#">Separated link</a></li>
        <li class="divider"></li>
        <li><a href="#">One more separated link</a></li>
      </ul>
    </li>
</ul>

Классы nav navbar-nav нужны для того чтобы элементы списка ul располагались горизонтально. Для создания простой ссылки в меню можно использовать следующий код

01
<li><a href="#">Link</a></li>

Для выделения активного пункта меню нужно использовать класс active

Для того чтобы вывести выпадающее меню нужно родительскому li добавить класс dropdown и внутри элемента разместить каретку по нажатию на которую будет выпадать меню. Во вложенный список ul нужно добавить класс dropdown-menu

01
02
03
04
05
06
07
08
09
10
11
12
<li class="dropdown">
  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a><!--Каретка-->
  <ul class="dropdown-menu"><!--Вложенный список который будет выпадать-->
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li class="divider"></li><!--Разделительная линия-->
    <li><a href="#">Separated link</a></li>
    <li class="divider"></li>
    <li><a href="#">One more separated link</a></li>
  </ul>
</li>

Фиксация navbar сверху
Для того чтобы зафиксировать navbar сверху нужно добавить класс navbar-fixed-top

01
<nav class="navbar navbar-default  navbar-fixed-top" role="navigation">

Фиксация navbar снизу
Для того чтобы зафиксировать navbar снизу нужно добавить класс navbar-fixed-bottom

01
<nav class="navbar navbar-default  navbar-fixed-bottom" role="navigation">