Как делается с помощью Bootstrap меню?

Как делается с помощью Bootstrap меню?

От автора: всем привет. Меню или навигация – это практически самый главный элемент сайта. В bootstrap ему также уделено ключевое внимание и сегодня мы с вами рассмотрим, как сделать с помощью bootstrap меню: горизонтальное, вертикальное, выпадающее, адаптивное и т.д.

Горизонтальное адаптивное меню на bootstrap

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

Что ж, давайте прямо сейчас рассмотрим пример создания простой горизонтальной навигации с помощью фреймворка. Пусть в меню у нас будет 5 пунктов. Вот код, который все формирует:

<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <!—Название сайта и кнопка раскрытия меню для мобильных-->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" 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="#">Название сайта</a>
    </div>

    <!—Само меню-->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <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><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

Да, код достаточно громоздкий, но понять тут все достаточно просто. Все меню оборачивается в тег nav, который должен содержать в себе классы navbar и navbar-default, а также обязательный атрибут role=»navigation». Класс navbar-default отвечает за внешний вид самого меню.

В него помещается еще один контейнер, который определяет ширину меню – будет ли оно на всю ширину (класс container-fluid) или не будет расширяться на широких мониторах, остановившись на конечной максимальной ширине (просо класс container).

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

При ширине более 768 пикселей эта кнопка будет скрыта, а в навигации будет только логотип и название сайта. Собственно, на этом блок nav-header закрывается, а следующий формирует непосредственно само меню.

Опять же, оно помещается в блок, классы collapse и navbar-collapse добавляют некоторые стили по умолчанию нашей навигации. Само меню формируется маркированным списком с классами nav и navbar-nav, в который записываются все пункты. Итог вы можете видеть на скриншоте:

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

То есть, как видите, меню свернулось. Его разворачивание происходит при клике на кнопку-гамбургер. Пункты на узких экранах располагаются вертикально друг за другом.

Хочу заметить, что такое меню формируется, если у вас прописан класс navbar-nav для списка, если же заменить его на nav-justified, то к пунктам будут применяться горизонтальные отступы, чтобы они растянулись на всю ширину экрана. Вот так:

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

Но давайте пока вернемся к стандартной навигации и посмотрим, что мы с ней еще можем сделать.

Делаем в bootstrap выпадающее меню

Итак, пока что мы с вами сделали простое горизонтальное меню, которое по умолчанию адаптивно и сжимается на маленьких экранах. Но давайте теперь его немного усложним, сделав один пункт выпадающим. Например, третий. Для этого в разметке нам нужно вот этот код:

<li><a href="#">Пункт 3</a></li>

Заметить на этот:

<li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Выпадающий пункт <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Подпункт</a></li>
            <li><a href="#">Еще подпункт</a></li>
            <li><a href="#">Еще что-то</a></li>
            <li class="divider"></li>
            <li><a href="#">И еще</a></li>
          </ul>
        </li>

Пример кода я взял из документации, лишь переписав пункты на русский язык. Вот результат:

Чтобы произошло раскрытие выпадающего пункта, по нему нужно кликнуть. Также если у вас не подключены javascript-компоненты, то есть файл bootstrap.js, то это не сработает.

Итак, давайте подробно разберем, что к чему и как формируется выпадающий пункт меню в bootstrap.

Во-первых, у этого пункта должен быть класс dropdown, а для работы джаваскрипта необходимо наличие атрибута data-toggle=»dropdown» у ссылки внутри этого пункта. Спан с классом caret создает стрелочку, которая как раз и указывает на то, что пункт является выпадающим.

Если вы когда-нибудь делали в html многоуровневые списки, то дальнейшая разметка вас никак не обескуражит – мы вставляем внутрь нашего выпадающего пункта меню полноценный вложенный список со своими пунктами, которые и будут отображаться при раскрытии. Также этому вложенному списку укажите атрибут role = “menu”.

Далее разметка абсолютно понятна, li с классом divider, как вы сами могли догадаться, отвечает за вывод линии разделителя между пунктами. Таких разделителей можно делать сколько угодно, а само вложенное меню может содержать хоть 15-20 пунктов.

Добавляем дополнительные элементы в нашу горизонтальную навигацию

Bootstrap позволяет легко встроить в меню доп. Элементы. Например, поле поиска. Об этом также рассказано в документации. Давайте и мы встроим такое поле прямо в нашу горизонтальную полосу. Для этого вставьте такой пример кода перед закрывающим тегом div с классом navbar-collapse:

<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"><span class = "glyphicon glyphicon-search"></span> Искать</button>
</form>

Итак, здесь у нас форма и 2 ее элемента – поле для поиска и кнопка поиска, в которую также можно вставить соответствующую иконку. Заметьте, что форма получила дополнительный необязательный класс – navbar-left. Он отвечает за положение элемента в навигации. Если бы мы прописали navbar-right, то форма поиска прижималась бы к правому краю. И вот уже наша форма поиска встроилась без проблем.

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

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

Изначально рассчитывать ширину содержимого меню так, чтобы оно полностью поместилось вплоть до ширины 768 пикселей. А начиная с этой ширины оно скроется за кнопкой-гамбургером, так что беспокоиться о его дальнейшем расположении не нужно.

Скрыть определенные элементы или пункты меню на размерах экрана, где оно начинает “съезжать”. В данном случае можно было бы для экранов менее 1000 пикселей скрыть поле поиска.

Изменить ширину окна, на которой происходит переключении навигации, то есть когда появляется эта самая кнопка:

А появляется она по умолчанию при ширине менее 768 пикселей, как я уже и говорил ранее. Просто это стандартная настройка фреймворка. Так вот, ее можно легко изменить с исходниках less или sass, либо на странице кастомизации. Например, вы можете сделать так, чтобы сворачивание происходило на ширине 1000 пикселей, а не 768. В таком случае вы сможете позволить себе построить чуть более широкое меню, в котором будет много элементов.

Либо наоборот, вы вполне можете поставить точку сжатия меню куда-нибудь на 520 пикселей. В общем, тут все зависит от ваших потребностей в каждом конкретном случае.

Несколько списков меню в одной общей навигации

В одно горизонтальное меню на самом деле можно добавить не один список пунктов. Давайте сразу после формы поиска добавим еще небольшое меню:

<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" role="menu">
            <li><a href="#">Ссылка</a></li>
            <li class="divider"></li>
            <li><a href="#">Еще ссылка</a></li>
          </ul>
        </li>
      </ul>

В этом меню будет всего 2 пункта, один обычный, а второй – выпадающий с двумя подпунктами и разделителем. Думаю, этот код должен быть уже для вас вполне понятен после того, что мы разобрали ранее. Также здесь мы добавили класс navbar-right, чтобы второй список с пунктами располагался по правому краю.

Теперь меню стало совсем громоздким и даже на широком мониторе (1280 пикселей и более) занимает почти все место в одной строке:

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

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

Изменение внешнего вида меню

Теперь я удалю второй созданный список и форму из нашего меню, оставив там только 5 пунктов, как было изначально. Сделаю я это для того, чтобы мы с вами могли кастомизировать внешний вид навигации. Вообще это можно сделать средствами bootstrap. Помните, я говорил в начале статьи, что класс navbar-default, который задается контейнеру nav, отвечает за внешний вид всего нашего меню. Так вот, если заменить этот класс на navbar-inverse, то произойдет полная инверсия цветов:

На этом встроенные возможности bootstrap заканчиваются. Если вам нужно перекрасить навигацию в другой цвет, можно поступить несколькими способами:

Создать файл bootstrap-theme.css, в котором переопределить стили

Создать свой файл style.css и сделать переопределение там

Скачать кастомизированный bootstrap, где вы уже изначально настраиваете все под нужные вам цвета

Сейчас я создам свой собственный файл style.css, в котором пропишу стили. В результате у нас получится собственное красивое меню на bootstrap буквально за пару минут. Вот такие стили я вставил в свой css-файл:

.navbar-my{
	background: #958332;
}
.navbar-my ul li a{
	color: #fff;
}
.navbar-my ul li a:hover{
	background: #333;
}
.navbar-my .navbar-brand{
	color: #fff;
}

Не забудьте подключить этот файл к html-документу. Причем подключаться он должен позднее, чем bootstrap.css. Теперь остается поменять в html-коде тегу nav класс navbar-default на navbar-my. Вот так преобразилось меню:

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

Как еще украсить меню? Добавьте иконки

Вы легко можете добавить любые иконки в меню, так как в Bootstrap есть свой иконочный шрифт. Даже если он вас чем-то не устроит, вы вполне можете подключить другой шрифт. Например, Font Awesome. Вот пример пунктов с иконками:

<li><a href="#"><span class = "glyphicon glyphicon-heart"></span> Пункт 4</a></li>
<li><a href="#"><span class = "glyphicon glyphicon-home"></span> Пункт 5</a></li>

Естественно, добавляйте иконки так, чтобы они соответствовали пункту, потому что в данном примере я добавил их, что называется, “от фонаря”. Но добавление релевантных иконок способно украсить вашу навигацию в разы. Тем более что на реальном сайте вместо скучной надписи “Название сайта” был бы логотип, что еще лучше украсило бы навигацию.

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

Что ж, ну а если вы хотите создать не просто отдельный компонент сайта, а полноценный шаблон (и даже не один), крайне рекомендую вам пройти наш курс по адаптивной верcтке сайтов на Bootstrap. Там вы получите по-настоящему полезную практику, которая в ближайшее время позволит вам разрабатывать проекты любой сложности на Bootstrap. До встречи, уважаемые чиатели webformyself! В следующих статьях мы рассмотрим еще несколько примеров, связанных с созданием навигаций.

Фреймворк Bootstrap - верстаем адаптивно, просто, быстро!

Получите видеокурс по основам Bootstrap

Получить

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree