Доброго времени суток, гости блога и дорогие подписчики. В текущей публикации мы разберем, как создается в Bootstrap многоуровневое меню.
Я расскажу, каким образом можно реализовать вертикальную и горизонтальную навигационную панель с подменю на Bootstrap 3, что такое акцентирующие панели и для чего они нужны, а также покажу запрограммированные мною примеры. Ну что ж, поехали!
Начнем с горизонтального меню
Среди всех существующих веб-сайтов наиболее часто можно встретить горизонтальную навигацию. Сразу же отвечу на ваш вопрос: «Почему именно горизонтальная?». Для этого есть несколько вполне оправданных причин:
- Такая панель занимает меньше полезного пространства и поэтому на основной контент остается вся ширина экрана;
- Горизонтальные меню более универсальны, так как позволяют комфортно перемещаться по сервису на небольших экранах и опять-таки полноценно просматривать необходимую информацию;
- Легко адаптируются под мобильные устройства.
Чтобы создать многоуровневый список, необходимо знать, как работают Dropdowns, а также Navigation Bar.
Итак, для начала создадим каркас для будущей навигационной панели. Для этого в коде прописываем тег меню <nav> и указываем в нем такие классы, как .navbar и .navbar- inverse. Можно также создать фиксированное меню при помощи классов .navbar-fixed-top и .navbar-fixed-bottom. После, как и обычно, объявляем контейнер, который будет растягиваться на всю ширину экрана и подстраиваться под размер последнего.
Вот теперь для удобства давайте реализуем «Гамбургер меню», чтобы при уменьшении разрешения экрана панель становилась компактной. Для этого необходимо создать триггер в виде кнопки и задать ему имя, по которому после будет происходить связь между кнопкой и перечнем пунктов. Выглядит такой финт следующим образом:
1 2 3 4 5 | <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». А после внутри него реализовать обычный список.
Код этой части программы следует писать следующим образом:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <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> |
Однако это еще не все. Для реализации многоуровневого списка стоит добавить выпадающий перечень. Поэтому вместо комментария вписываем следующий программный код:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <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> |
Для превращения кода в конфетку подключите дополнительные стили:
1 2 3 4 5 6 7 8 9 10 | <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 было разработано достаточно много удобных и необычных панелей навигации. К счастью, большинство из них выложено в публичный доступ в Интернете.
Ну а я покажу вам, как стандартными инструментами создать такой вид элемента управления.
1 2 3 4 5 6 7 8 9 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 | <!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.
Иногда перечисленные классы используют для оповещения пользователя об определенных ошибках, успешных операциях, важной информации и т.д. В качестве примера можно рассмотреть необычную интерпретацию меню:
1 2 3 4 5 6 7 8 9 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 54 | <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> |
Ну вот я и рассказал вам, все что хотел. Подписывайтесь на обновления блога, чтобы узнать побольше всего в области верстки и сайтостроения. И не забывайте делать репосты. До новых встреч! Пока-пока!
С уважением, Роман Чуешов
Я второй день бьюсь над двухуровневым меню на md bootstrap! С вашим кодом + моим всё получилось наконец-то!! Спасибо!
а где css для class="test"