Bootstrap выпадающее многоуровневое меню – Как сделать трехуровневое меню на bootstrap 3 для шаблона WordPress (Halt! Ненависть!)?

Выпадающие меню · Bootstrap на русском

Раскрывающиеся списки переключаемой, контекстная накладки для отображения списков ссылок и более. Они сделаны интерактивными с включенным Bootstrap выпадающего JavaScript плагин. Они переключаются нажатием, не парит; это преднамеренное дизайнерское решение.

Содержание

Примеры

Переключение обернуть выпадающем (ваша кнопка или ссылка) и в выпадающем меню в .dropdown, или другой элемент, который заявляет, position: relative;. Раскрывающиеся списки могут быть вызваны из <a> или <button> элементы, чтобы лучше соответствовать вашим потенциальным потребностям.

Одиночная кнопка выпадающего меню

Ни один .btn можно превратить в выпадающем тумблер с некоторыми изменениями разметки. Вот как вы можете положить их на работу с <button> элементы:

 <div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div aria-labelledby="dropdownMenuButton">
    <a href="#">Action</a>
    <a href="#">Another action</a>
    <a href="#">Something else here</a>
  </div>
</div>

И с <a> элементами:

<div>
  <a href="http://example.com" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown link
  </a>

  <div aria-labelledby="dropdownMenuLink">
    <a href="#">Action</a>
    <a href="#">Another action</a>
    <a href="#">Something else here</a>
  </div>
</div>

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

<!-- Пример одной кнопки опасности - >
<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action
  </button>
  <div>
    <a href="#">Action</a>
    <a href="#">Another action</a>
    <a href="#">Something else here</a>
    <div></div>
    <a href="#">Separated link</a>
  </div>
</div>
 

Split кнопка с выпадающим меню

Аналогичным образом создайте сплит кнопки раскрывающиеся списки с практически такой же разметки, как одной кнопки раскрывающиеся списки, но с добавлением .dropdown-toggle-split для правильного шрифта выпадающего каре.

Мы используем эту экстра-класса, чтобы уменьшить горизонтальную padding по обе стороны от каретки на 25% и удалите margin-left, который добавляется для обычной кнопки выпадающих меню. Эти изменения держать курсор по центру кнопку разделить и обеспечить более точного размера нажмите рядом с основной кнопкой.

<!-- Пример сплит опасности - >
<div>
  <button type="button">Action</button>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span>Toggle Dropdown</span>
  </button>
  <div>
    <a href="#">Action</a>
    <a href="#">Another action</a>
    <a href="#">Something else here</a>
    <div></div>
    <a href="#">Separated link</a>
  </div>
</div>

Изменение размера

Кнопка меню работы с кнопками всех размеров, в том числе по умолчанию и секущихся выпадающих кнопок.

<!-- Большие группы (кнопка по умолчанию и сплит) -->
<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Large button
  </button>
  <div>
    ...
  </div>
</div>
<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Large button
  </button>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span>Toggle Dropdown</span>
  </button>
  <div>
    ...
  </div>
</div>

<!-- Небольшие группы (кнопка по умолчанию и сплит) -->
<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Small button
  </button>
  <div>
    ...
  </div>
</div>
<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Small button
  </button>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span>Toggle Dropdown</span>
  </button>
  <div>
    ...
  </div>
</div>
  

Вариант списка сверху

Вызвать выпадающее меню над элементами, добавив .dropup для родительского элемента.

<!-- Кнопка по умолчанию dropup -->
<div>
  <button type="button">Dropup</button>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span>Toggle Dropdown</span>
  </button>
  <div>
    <!-- Ссылки выпадающего меню -->
  </div>
</div>

<!-- Кнопка сплит dropup -->
<div>
  <button type="button">
    Split dropup
  </button>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span>Toggle Dropdown</span>
  </button>
  <div>
    <!-- Ссылки выпадающего меню -->
  </div>
</div>

Исторически выпадающем меню had чтобы быть одной, но это уже не в случае с v4. Теперь при необходимости можно использовать <button> элементы в раскрывающихся списках, а не просто <a>ы.

<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown
  </button>
  <div aria-labelledby="dropdownMenu2">
    <button type="button">Action</button>
    <button type="button">Another action</button>
    <button type="button">Something else here</button>
  </div>
</div>

По умолчанию, выпадающее меню автоматически устанавливается 100% от верхнего и вдоль левого края его родителя. Добавьте .dropdown-menu-right к .dropdown-menu для выравнивание выпадающего меню справа.

Внимание! меню расположены только с CSS и может потребоваться некоторые дополнительные стили для точного выравнивания.

This dropdown’s menu is right-aligned

<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    This dropdown's menu is right-aligned
  </button>
  <div>
    <button type="button">Action</button>
    <button type="button">Another action</button>
    <button type="button">Something else here</button>
  </div>
</div>

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

<div>
  <h6>Dropdown header</h6>
  <a href="#">Action</a>
  <a href="#">Another action</a>
</div>

Отдельные группы связанных элементов меню с делителем.

<div>
  <a href="#">Action</a>
  <a href="#">Another action</a>
  <a href="#">Something else here</a>
  <div></div>
  <a href="#">Separated link</a>
</div>
 

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

<div>
  <a href="#">Regular link</a>
  <a href="#">Disabled link</a>
  <a href="#">Another link</a>
</div>

Использование

Через атрибуты данных или JavaScript, выпадающее плагин переключает скрытое содержание (выпадающие меню), переключая .open класс родительского элемента списка.

На мобильных устройствах, открывая выпадающий добавляет .dropdown-backdrop как площадь нажатия для закрытия выпадающего меню При нажатии за меню требование для правильной поддержки iOS. Это означает, что переход от открытого выпадающего меню в другое меню требуется дополнительное нажатие на мобильный.

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

С помощью данных атрибутов

Добавить data-toggle="dropdown" на ссылку или кнопку для переключения в меню.

<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
  </button>
  <div aria-labelledby="dLabel">
    ...
  </div>
</div>

Через JavaScript

Вызвать меню через JavaScript:

$('.dropdown-toggle').dropdown()

data-toggle="dropdown" еще требуется

Независимо от того, вызываете ли вы свой выпадающий список через JavaScript или вместо этого используете data-api, data-toggle="dropdown" всегда должно присутствовать на спусковом элементе раскрывающегося меню.

Варианты

None.

Методы

Способ	Описание
$().dropdown('toggle')	Переключает меню данной панели навигации и вкладок навигации.

События

Все выпадающие события обстреляли .dropdown-menu’родительский элемент S и relatedTarget свойство, значением которого является переключение элемента привязки.

Событие	Описание
show.bs.dropdown	Это событие немедленно срабатывает при вызове метода экземпляра-шоу называется.
shown.bs.dropdown	Это событие запускается, когда выпадающее меню становится видимым для пользователя (будет ждать CSS переходы для завершения).
hide.bs.dropdown	Это событие немедленно уволили, когда скрывать метод экземпляра называется.
hidden.bs.dropdown	Это событие запускается, когда в списке есть, который скрыт от пользователя (будет ждать CSS переходы для завершения).

$('#myDropdown').on('show.bs.dropdown', function () {
  // сделать что-то...
})

Выпадающее меню на Bootstrap 4 при наведении (событие hover)

Как известно, стандартный dropdown список раскрывается только при нажатии на главный пункт меню. По умолчанию выпадающий список имеет свойство «display: none;», и переходит в «display: block;», когда срабатывает событие click и на оборот — чтобы скрыть, нужно опять нажать на меню.

На примере меню из документации Bootstrap 4:

<nav>

  <button type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">

    <span></span>

  </button>

  <div>

    <ul>

      <li>

        <a href="#">Главная</a>

      </li>

      <li>

        <a href="#">Один</a>

      </li>

      <li>

        <a href="#">Два</a>

      </li>

      <li>

        <a href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Три</a>

        <div aria-labelledby="navbarDropdownMenuLink">

          <a href="#">Три один</a>

          <a href="#">Три два</a>

          <a href="#">Три три</a>

        </div>

      </li>

    </ul>

  </div>

</nav>

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

Чтобы меню раскрывалось и скрывалось при наведении (событие hover), достаточно чуть подправить css файл bootstrap 4 или прописать это в своем файле стилей:

nav.navbar .dropdown:hover > .dropdown-menu {

 display: block; 

} 

Теперь при наведении, нашему списку будет присваиваться свойство «block» и он раскроется. Вот так легко это делается, не правда ли?

Чтобы это работало только на ПК версиях экранов, и не работало на мобильных устройствах, так как там просто отсутствует нормальная работа события hover. Я рекомендую прописать ниже еще вот такой код:

@media only screen and (max-device-width: 992px){

    nav.navbar .dropdown:hover .dropdown-menu{

        display: none;

    }

}

Учтите, что этим вы не отменяете событие click – раскрытие меню по клику. Оно будет так же работать наравне и с наведением.

Как отключить событие click и оставить только событие hover, вы можете прочитать в этой статье:

Переход по ссылке главного (верхнего) меню раскрывающегося списка в Bootstrap 4

 

Всем удачи!

 

Возможно вам так же будет интересно:

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

От автора: я приветствую вас. Сегодня мы рассмотрим, как сделать на Bootstrap выпадающее меню. С нуля для этого вам пришлось бы написать энное количество кода, с помощью фреймворка же это сделать намного проще.

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

<div> <a data-toggle=»dropdown» href=»#»>Города <span></span></a> <ul role=»menu» aria-labelledby=»dLabel»> <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> </div> <div> <a data-toggle=»dropdown» href=»#»>Страны <span></span></a> <ul role=»menu» aria-labelledby=»dLabel»> <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> </div>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

<div>   <a data-toggle=»dropdown» href=»#»>Города <span></span></a>   <ul role=»menu» aria-labelledby=»dLabel»> <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>   </div> <div>     <a data-toggle=»dropdown» href=»#»>Страны <span></span></a>   <ul role=»menu» aria-labelledby=»dLabel»> <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> </div>

Фреймворк Bootstrap 4. Быстрый старт

Изучите основы Bootstrap 4 на практическом примере по верстке блога с нуля

Узнать подробнее

Итак, за реализацию одного выпадающего пункта меню можно использовать отдельный блок с классом dropdown, в него нужно вложить ссылку или кнопку, при клике по которой будет непосредственно раскрываться меню. Для ссылки (или кнопки) обязательным атрибутом является data-toggle = dropdown, чтобы меню корректно открывалось.

Ну а сами пункты выпадающего меню формируются списком. Пункт списка с классом divider позволяет нарисовать красивый простой разделитель между пунктами.

Возможно, придется подкорректировать отображение пунктов, поставить их в ряд, потому что изначально dropdown – блочный элемент. Я прописал некоторые стили для стилизации:

.dropdown{ float: left; margin-right: -20px; } .dropdown>a{ background: #7AA437; color: #fff; text-decoration: none; padding: 10px; } .dropdown .caret{ margin-right: 10px; }

.dropdown{ float: left; margin-right: -20px; } .dropdown>a{ background: #7AA437; color: #fff; text-decoration: none; padding: 10px; } .dropdown .caret{ margin-right: 10px; }

Пункты списка выпадающего меню также можно оформить по вашему усмотрению.

Фреймворк Bootstrap 4. Быстрый старт

Изучите основы Bootstrap 4 на практическом примере по верстке блога с нуля

Узнать подробнее

Кнопка-выпадающее меню

Код подойдет тот же самый, только вместо ссылка вставьте кнопку, а общему контейнеру вместо класса dropdown укажите btn-group:

<button type=»button» data-toggle=»dropdown»> Города <span></span> </button>

<button type=»button» data-toggle=»dropdown»>     Города <span></span>   </button>

Отличие кнопки от ссылки в том, что кнопке не нужно прописывать стили, в отличие от ссылки. Также размеры кнопки можно легко менять с помощью классов btn-lg|md|sm|xs. Также выпадающее меню можно сделать с раздельными кнопками, этот пример вы можете посмотреть в документации.

Выпадающее меню как часть горизонтального меню

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

<li> <a href=»#» data-toggle=»dropdown»>Выпадающий пункт <span></span></a> <ul role=»menu»> <li><a href=»#»>Action</a></li> <li><a href=»#»>Another action</a></li> <li><a href=»#»>Something else here</a></li> <li></li> <li><a href=»#»>Separated link</a></li> <li></li> <li><a href=»#»>One more separated link</a></li> </ul> </li>

<li>           <a href=»#» data-toggle=»dropdown»>Выпадающий пункт <span></span></a>           <ul role=»menu»>             <li><a href=»#»>Action</a></li>             <li><a href=»#»>Another action</a></li>             <li><a href=»#»>Something else here</a></li>             <li></li>             <li><a href=»#»>Separated link</a></li>             <li></li>             <li><a href=»#»>One more separated link</a></li>           </ul>    </li>

Таких пунктов в навигации вы можете разместить несколько и они будут располагаться в одну строку, можете попробовать.

Как сделать в Bootstrap выпадающее меню при наведении на пункт?

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

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

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

Фреймворк Bootstrap 4. Быстрый старт

Изучите основы Bootstrap 4 на практическом примере по верстке блога с нуля

Узнать подробнее

Фреймворк Bootstrap 4. Быстрый старт

Изучите основы Bootstrap 4 на практическом примере по верстке блога с нуля!

Смотреть

Bootstrap 4 выпадающее меню на MODX при помощи PdoMenu

Автор Алексей На чтение 7 мин. Опубликовано 01.09.2018

Последнее изменение поста: 22 октября 2018 в 20:28

Сегодня статья + видео урок о том как при помощи pdoMenu вывести выпадающее меню от bootstrap 4, как внедрить микроразметку schema.org и как вывести меню при помощи шаблонизатора fenom. Подробно расписывать не чего не буду, так как это далеко не первый такой урок, просто напишу готовые выводы и в видео расскажу что к чему.

1. Стандартный вывод меню

[[pdoMenu?
    &level=`2`
    &parents=`0`
    &firstClass=`0`
    &lastClass=`0`
    &rowClass=`nav-item`
    &tpl=`@INLINE <li[[+classes]]><a href="[[+link]]" [[+attributes]]>[[+menutitle]]</a>[[+wrapper]]</li>`
    &parentClass=`dropdown`
    &outerClass=`navbar-nav`
    &tplOuter=`@INLINE <ul [[+classes]]>[[+wrapper]]</ul>` 
    &tplInner=`@INLINE <ul>[[+wrapper]]</ul>`
    &tplParentRow=`@INLINE <li [[+classes]]><a role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" href="[[+link]]" [[+attributes]]>[[+menutitle]] </a>[[+wrapper]]</li>`
]]

2. Вывод меню при помощи шаблонизатора fenom

{'!pdoMenu' | snippet : [
    'level' => 2,
    'parents' => 0,
    'firstClass' => '0',
    'lastClass' => '0',
    'rowClass' => 'nav-item',
    'tpl' => '@INLINE <li {$classes}><a itemprop="url" href="{$link}" {$attributes}>{$menutitle}</a>{$wrapper}</li>',
    'parentClass' => 'dropdown',
    'outerClass' => 'navbar-nav',
    'tplOuter' => '@INLINE <ul {$classes}>{$wrapper}</ul>',
    'tplInner' => '@INLINE <ul>{$wrapper}</ul>',
    'tplParentRow' => '@INLINE <li {$classes}><a itemprop="url" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" href="{$link}" {$attributes}>{$menutitle} </a>{$wrapper}</li>'
]}

И css код для тех кто хочет, чтобы меню выпадало при наведении курсора мышки:

.dropdown:hover > .dropdown-menu {display:block;}

Кастомные меню — отличающиеся от оригинальных

В нашем шаблоне код меню выглядит так:

<!-- Navigation -->
    <nav>
      <div>
        <a href="index.html">Start Bootstrap</a>
        <button type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
          <span></span>
        </button>
        <div>
          <ul>
            <li>
              <a href="about.html">About</a>
            </li>
            <li>
              <a href="services.html">Services</a>
            </li>
            <li>
              <a href="contact.html">Contact</a>
            </li>
            <li>
              <a href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Portfolio
              </a>
              <div aria-labelledby="navbarDropdownPortfolio">
                <a href="portfolio-1-col.html">1 Column Portfolio</a>
                <a href="portfolio-2-col.html">2 Column Portfolio</a>
                <a href="portfolio-3-col.html">3 Column Portfolio</a>
                <a href="portfolio-4-col.html">4 Column Portfolio</a>
                <a href="portfolio-item.html">Single Portfolio Item</a>
              </div>
            </li>
            <li>
              <a href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Blog
              </a>
              <div aria-labelledby="navbarDropdownBlog">
                <a href="blog-home-1.html">Blog Home 1</a>
                <a href="blog-home-2.html">Blog Home 2</a>
                <a href="blog-post.html">Blog Post</a>
              </div>
            </li>
            <li>
              <a href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Other Pages
              </a>
              <div aria-labelledby="navbarDropdownBlog">
                <a href="full-width.html">Full Width Page</a>
                <a href="sidebar.html">Sidebar Page</a>
                <a href="faq.html">FAQ</a>
                <a href="404.html">404</a>
                <a href="pricing.html">Pricing Table</a>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </nav>

Что немного отличается от стандартного, следовательно, здесь будет немного более сложный вывод

<!-- Navigation -->
<nav>
    <div>
        <a href="/"><i></i> [[++site_name]]</a>
        <button type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
          <span></span>
        </button>
        <div>
            [[pdoMenu?
                &level=`2`
                &parents=`0`
                &firstClass=`0`
                &lastClass=`0`
                &rowClass=`nav-item`
                &tpl=`@INLINE <li[[+classes]]><a href="[[+link]]" [[+attributes]]>[[+menutitle]]</a>[[+wrapper]]</li>`
                &parentClass=`dropdown`
                &outerClass=`navbar-nav ml-auto`
                &tplOuter=`@INLINE <ul [[+classes]]>[[+wrapper]]</ul>` 
                &tplInner=`@INLINE <ul>[[+wrapper]]</ul>`
                &tplInnerRow=`@INLINE <a href="[[+link]]" [[+attributes]]>[[+menutitle]] </a>[[+wrapper]]`
                &tplParentRow=`@INLINE <li [[+classes]]><a data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" href="[[+link]]" [[+attributes]]>[[+menutitle]] </a>[[+wrapper]]</li>`
            ]]
        </div>
    </div>
 </nav>

Как то так, если не можете самостоятельно построить меню, то внимательно читаем документацию docs.modx.pro/komponentyi/pdotools/snippetyi/pdomenu

Внедрение микроразметки schema.org в MODX меню

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

<ul itemtype="http://schema.org/SiteNavigationElement" itemscope="itemscope">
<li itemprop="name"><a itemprop="url" href="#">Link1</a></li>
<li itemprop="name"><a itemprop="url" href="#">Link2</a></li>
</ul>

Следовательно наш вывод меню примет следующий вид

            [[pdoMenu?
                &level=`2`
                &parents=`0`
                &firstClass=`0`
                &lastClass=`0`
                &rowClass=`nav-item`
                &tpl=`@INLINE <li itemprop="name" [[+classes]]><a itemprop="url" href="[[+link]]" [[+attributes]]>[[+menutitle]]</a>[[+wrapper]]</li>`
                &parentClass=`dropdown`
                &outerClass=`navbar-nav ml-auto`
                &tplOuter=`@INLINE <ul itemtype="http://schema.org/SiteNavigationElement" itemscope="itemscope" [[+classes]]>[[+wrapper]]</ul>` 
                &tplInner=`@INLINE <ul>[[+wrapper]]</ul>`
                &tplInnerRow=`@INLINE <a itemprop="url" href="[[+link]]" [[+attributes]]>[[+menutitle]] </a>[[+wrapper]]`
                &tplParentRow=`@INLINE <li itemprop="name" [[+classes]]><a itemprop="url" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" href="[[+link]]" [[+attributes]]>[[+menutitle]] </a>[[+wrapper]]</li>`
            ]]

 

Web-разработка • HTML и CSS

Создание горизонтального адаптивного меню для сайта осуществляется с помощью компонента «Navbar». Компонент имеет два режима отображения:

• десктопный (обычный) — выводятся все элементы меню;
• мобильный (свёрнутый) — отображается бренд и кнопка «Гамбургер».

Режим отображения меню зависит от ширины viewport браузера. Точка перелома задается с помощью css-класса navbar-expand-{sm…xl}.

<nav>
    <!-- Контейнер (определяет ширину компонента Navbar) -->
    <div>
        <!-- Бренд и кнопка «Гамбургер» -->
        <a href="#">Brand</a>
        <button type="button" data-toggle="collapse"
                data-target="#navbar-example" aria-controls="navbar-example"
                aria-expanded="false" aria-label="Toggle navigation">
            <span></span>
        </button>
        <!-- Основная часть меню (может содержать ссылки, формы и другие элементы) -->
        <div>
            <!-- Этот блок расположен слева -->
            <ul>
                <li>
                    <a href="#">
                        Первая ссылка <span>(текущая)</span>
                    </a>
                </li>
                <li>
                    <a href="#">Вторая ссылка</a>
                </li>
                <li>
                    <a href="#"
                       role="button" data-toggle="dropdown" aria-haspopup="true"
                       aria-expanded="false">
                        Выпадающее меню
                    </a>
                    <div aria-labelledby="navbarDropdown">
                        <a href="#">Третья ссылка</a>
                        <a href="#">Четвертая ссылка</a>
                        <div></div>
                        <a href="#">Пятая ссылка</a>
                    </div>
                </li>
                <li>
                    <a href="#">Не активная</a>
                </li>
            </ul>
            <!-- Этот блок расположен справа -->
            <form>
                <input type="search" placeholder="Search"
                       aria-label="Search">
                <button type="submit">Search</button>
            </form>
        </div>
    </div>
</nav>

Для установки цветового оформления меню используются еще два дополнительных класса: navbar-{…} и bg-{…}. Для установки цвета фона к bg-{…} необходимо добавить любую из восьми цветовых схем — primary, secondary, dark, light, warning, danger, info, success. Класс navbar-{…} отвечает за цвет текста и поддерживает два варианта — navbar-dark и navbar-light.

<nav>
    ..........
</nav>

Для «NavBar» не обязателен контейнер, но если необходимо ограничить ширину всего меню, то можно его обернуть в .container.

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

Если же нужно ограничить ширину только содержимого, а само меню отображать на всю ширину страницы, то .container следует поместить внутри .navbar.

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

Для позиционирования меню фреймворк предлагает три дополнительных класса:

• fixed-top — фиксирует меню в самом верху страницы;
• fixed-bottom — фиксирует меню в самом низу страницы;
• sticky-top — приклеивает меню в верху при прокрутке страницы.

<nav>
    ..........
</nav>

<nav>
    ..........
</nav>

<nav>
    ..........
</nav>

Элементы меню

Компонент «NavBar» состоит из нескольких подкомпонентов, которые можно добавлять или исключать по мере необходимости.

Название или логотип компании

<nav>
    <!-- Текстовая ссылка -->
    <a href="#">Brand</a>
    ..........
</nav>

<nav>
    <!-- Ссылка с логотипом -->
    <a href="#">
        <img src="/images/logo.png" alt="...">
    </a>
    ..........
</nav>

<nav>
    <!-- Ссылка с логотипом и текстом-->
    <a href="#">
        <img src="/images/logo.png" alt="...">
        Brand
    </a>
    ..........
</nav>

<nav>
    <!-- Как заголовок без ссылки-->
    <span>Brand</span>
    ..........
</nav>

Кнопка для открытия меню

Имеет css-класс .navbar-toggler и предназначена для показа и скрытия содержимого меню .collapse.navbar-collapse на малениких экранах:

<nav>
    ..........
    <button type="button" data-toggle="collapse"
            data-target="#navbar-example" aria-controls="navbar-example"
            aria-expanded="false" aria-label="Toggle navigation">
        <span></span>
    </button>
    ..........
</nav>

Блок содержимого меню

Имеет css-классы .collapse.navbar-collapse и скрывается в контрольной точке, которая задается классом navbar-expand-{sm…xl}. Может быть показано и скрыто по клику на кнопке .navbar-toggler:

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

Блок ссылок меню

Имеет css-класс .navbar-nav и состоит из ссылок и вложенных выпадающих списков со ссылками:

<nav>
    ..........
    <div>
        <ul>
            <li>
                <a href="#">
                    Первая ссылка <span>(текущая)</span>
                </a>
            </li>
            <li>
                <a href="#">Вторая ссылка</a>
            </li>
            <li>
                <a href="#"
                   role="button" data-toggle="dropdown" aria-haspopup="true"
                   aria-expanded="false">
                    Выпадающее меню
                </a>
                <div aria-labelledby="navbarDropdown">
                    <a href="#">Третья ссылка</a>
                    <a href="#">Четвертая ссылка</a>
                    <div></div>
                    <a href="#">Пятая ссылка</a>
                </div>
            </li>
            <li>
                <a href="#">Не активная</a>
            </li>
        </ul>
        ..........
    </div>
    ..........
</nav>

Форма внутри меню

<nav>
    ..........
    <div>
        ..........
        <form>
            <input type="search" placeholder="Search"
                   aria-label="Search">
            <button type="submit">Search</button>
        </form>
    </div>
    ..........
</nav>

Текст внутри меню

Класс .navbar-text — позволяет добавлять текст в меню.

<nav>
    <span>Brand</span>
    <button type="button" data-toggle="collapse"
            data-target="#navbar-example" aria-controls="navbar-example"
            aria-expanded="false" aria-label="Toggle navigation">
        <span></span>
    </button>
    <div>
        <ul>
            <li>...</li>
            <li>...</li>
            <li>...</li>
        </ul>
        <!-- Текст внутри меню -->
        <span>Navbar text with an inline element</span>
        <form>
            ..........
        </form>
    </div>
</nav>

Поиск: Bootstrap • CSS • HTML • Web-разработка • Верстка • Компонент • Меню • Навигация • Фреймворк • Navbar