Ноябрь

2016

22:01

Автор: Роман Чуешов

Создаем собственное многоуровневое меню на bootstrap 3, на примере горизонтальной навигационной панели

Доброго времени суток, гости блога и дорогие подписчики. В текущей публикации мы разберем, как создается в Bootstrap многоуровневое меню.

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

Начнем с горизонтального меню

Среди всех существующих веб-сайтов наиболее часто можно встретить горизонтальную навигацию. Сразу же отвечу на ваш вопрос: «Почему именно горизонтальная?». Для этого есть несколько вполне оправданных причин:

Такая панель занимает меньше полезного пространства и поэтому на основной контент остается вся ширина экрана;
Горизонтальные меню более универсальны, так как позволяют комфортно перемещаться по сервису на небольших экранах и опять-таки полноценно просматривать необходимую информацию;
Легко адаптируются под мобильные устройства.

Чтобы создать многоуровневый список, необходимо знать, как работают Dropdowns, а также Navigation Bar.

Итак, для начала создадим каркас для будущей навигационной панели. Для этого в коде прописываем тег меню <nav> и указываем в нем такие классы, как .navbar и .navbar- inverse. Можно также создать фиксированное меню при помощи классов .navbar-fixed-top и .navbar-fixed-bottom. После, как и обычно, объявляем контейнер, который будет растягиваться на всю ширину экрана и подстраиваться под размер последнего.

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

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavigationBar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>

А теперь пришло время верстать сами пункты меню. Изначально необходимо объявить отдельный блок с идентификатором равным «myNavigationBar». А после внутри него реализовать обычный список.

Код этой части программы следует писать следующим образом:

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavigationBar">
        <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="myNavigationBar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Главная</a></li>
        <li><a href="#">О нас</a></li>
        <li><a href="#">Контакты</a></li>
<!--В эту часть программы будет вставлен выпадающий список -->
      </ul>
    </div>
  </div>

Однако это еще не все. Для реализации многоуровневого списка стоит добавить выпадающий перечень. Поэтому вместо комментария вписываем следующий программный код:

<li class="dropdown">
<!--Указываю, что следующий пункт раскроет подменю  -->
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Продукция<span class="caret"></span></a>
         <ul class="dropdown-menu">
      <li><a href="#">Бытовая химия</a></li>
      <li><a  href="#">Все для дома</a></li>
<!--Создаю пользовательский класс, чтобы выводить ступеньками дополнительные пункты перечня-->
      <li class="submenuDropdown">
        <a class="test" href="#">Техника<span class="caret"></span></a>
<!--Определяю еще один внутренний выпадающий список-->
        <ul class="dropdown-menu">
          <li><a href="#">Смартфоны</a></li>
          <li><a href="#">Ноутбуки и стационарные компьютеры</a></li>
          <li class=" submenuDropdown">
            <a class="test" href="#">Бытовая техника<span class="caret"></span></a>
<!--И еще один-->
            <ul class="dropdown-menu">
              <li><a href="#">Холодильники</a></li>
              <li><a href="#">Плиты</a></li>
              <li><a href="#">Микроволновые печи</a></li>
              <li><a href="#">Комбайны</a></li>
            </ul>
          </li>
        </ul>
      </li>

Для превращения кода в конфетку подключите дополнительные стили:

<style>
.submenuDropdown {
    position: relative;
}
.submenuDropdown .dropdown-menu {
    top: 0;
    margin-top: -1px;
    left: 100%;
}
</style>

Вот теперь при нажатии на вкладку «Продукция» появилась возможность просматривать и выбирать пункты вложенных списков.

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

<meta name="viewport" content="width=device-width, initial-scale=1">

Вертикальный многоуровневый навигационный список

Вот теперь я расскажу вам о менее популярном подходе – вертикальном меню. Для этого во фреймворке нет готовых красивых решений. Поэтому в интернете можно найти множество различных плагинов и модулей.

Так, для Joomla 3 и WordPress было разработано достаточно много удобных и необычных панелей навигации. К счастью, большинство из них выложено в публичный доступ в Интернете.

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

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Пример вертикального меню</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.submenu{ position:relative;}
.submenu > .dropdown-menu{
top:0;
left:100%;
margin-top:-6px;
}
</style>
</head>
<body>
<!-- Указываю размеры элемента в зависимости от разрешения дисплея-->
<div class = "col-xs-12 col-sm-4">
<nav class="navbar navbar-inverse">
  <div class="container-fluid">
<!-- nav-stacked позволяет упорядочить пункты списка по вертикали-->
    <ul class="nav nav-tabs nav-stacked">
      <li class="active"><a href="#">Главная</a></li>
        <li><a href="#">О нас</a></li>
        <li><a href="#">Контакты</a></li>
<!-- Создаю пользовательский класс, который будет отображать подменю с правой стороны-->
        <li class="dropdown submenu">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Продукция<span class="glyphicon glyphicon-chevron-right"></span></a>
         <ul class="dropdown-menu ">
      <li><a href="#">Бытовая химия</a></li>
      <li><a  href="#">Мебель</a></li>
      <li><a  href="#">Кухонная техника</a></li>
    </ul>
  </div>
</nav>
</div>
 
<div class="container">
  <h3>Основная информация</h3>
</div>
 
</body>
</html>

Иногда многоуровневые списки создают с помощью Wayfinder, однако его я пока опущу.

Расставим акценты

Во фреймворке существует одно интересное понятие под названием акцентирующие элементы. Они реализуются при помощи специальных встроенных классов, которые в зависимости от типа задают определенный цвет объектам. Я уверен, вы с ними уже знакомы. К ним относятся:

.panel-primary;
.panel-info;
.panel-danger;
.panel-warning;
.panel-success.

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

<div class="panel panel-info">
<div class="panel-heading">
  <div class="container-fluid">
    <div class="navbar-header">
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavigationBar">
        <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="myNavigationBar">
      <ul class="nav navbar-nav ">
        <li class="active"><a href="#">Главная</a></li>
        <li><a href="#">О нас</a></li>
        <li><a href="#">Контакты</a></li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Продукция<span class="caret"></span></a>
         <ul class="dropdown-menu">
      <li><a href="#">Бытовая химия</a></li>
      <li><a  href="#">Все для дома</a></li>
      <li class="submenuDropdown">
        <a class="test" href="#">Техника<span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#">Смартфоны</a></li>
          <li><a href="#">Ноутбуки и стационарные компьютеры</a></li>
          <li class="submenuDropdown">
            <a class="test" href="#">Бытовая техника<span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#">Холодильники</a></li>
              <li><a href="#">Плиты</a></li>
              <li><a href="#">Микроволновые печи</a></li>
              <li><a href="#">Комбайны</a></li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
        </li>
      </ul>
    </div>
  </div>
  </div>
   <h1 style="text-align:center">Основной контент</h1>
</div>
<script>
$(document).ready(function(){
  $('.submenuDropdown a.test').on("click", function(e){
    $(this).next('ul').toggle();
    e.stopPropagation();
    e.preventDefault();
  });
});
</script>

Ну вот я и рассказал вам, все что хотел. Подписывайтесь на обновления блога, чтобы узнать побольше всего в области верстки и сайтостроения. И не забывайте делать репосты. До новых встреч! Пока-пока!

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

Прочитано: 1677 раз

Этот блог уже читают
читай и ты!

Оставить коментарий

Алёна

Я второй день бьюсь над двухуровневым меню на md bootstrap! С вашим кодом + моим всё получилось наконец-то!! Спасибо!

06.06.2018 в 12:55

Ответить
Алексей

а где css для class="test"

07.06.2019 в 10:06

Ответить