Горизонтальное меню bootstrap 3

Горизнтальное меню. Основы bootstrap 3 для начинающих. Урок №10

Всем привет!
Продолжаем изучать основы «bootstrap3».
В сегодняшнем уроке вы научитесь создавать горизонтальное меню для веб-страницы.
В предыдущих уроках вы научились создавать списки и выпадающие списки. По сути, списки можно использовать как меню, но в bootstrap есть специальные классы для создания меню.
Благодаря этим классам можно быстро, красиво, а главное, адаптивно создать меню для сайта и вы в этом сейчас сами убедитесь.

Вот так выглядит меню на компьютерах:

…а вот так на мобильных устройствах. Все элементы меню прячутся и остается только кнопка. При нажатии на кнопку появляется меню выпадающим списком:

При нажатии справа на кнопку меню, откроется выпадающий список:

Теперь сам код, а потом разберем классы, которые можно менять.

<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 1</a></li> <li><a href=»#»>Link 2</a></li> <li class=»dropdown»> <a href=»#» class=»dropdown-toggle» data-toggle=»dropdown»>Dropdown 1<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 3</a></li> <li class=»dropdown»> <a href=»#» class=»dropdown-toggle» data-toggle=»dropdown»>Dropdown 2<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>

Сейчас меню резиновое, так как используется класс «container-fluid» (строка №2):

<div class=»container-fluid»>

Если вместо класса «container-fluid» прописать класс «container», тогда меню не будет растягиваться на всю ширину экрана, а примет ширину класса «container». О классе «container» можно почитать .

А вот эта часть кода отвечает за название организации (строка №11). Сюда можно смело вставлять название сайта, логотип. Также в этой части кода есть кнопка, которая появляется на мобильных устройствах (строки №5 — №10):

<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 1</a></li> <li><a href=»#»>Link 2</a></li> <li class=»dropdown»> <a href=»#» class=»dropdown-toggle» data-toggle=»dropdown»>Dropdown 1<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 3</a></li> <li class=»dropdown»> <a href=»#» class=»dropdown-toggle» data-toggle=»dropdown»>Dropdown 2<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 —>

Хочу обратить ваше внимание на строку №5:

<button type=»button» class=»navbar-toggle» data-toggle=»collapse» data-target=»#bs-example-navbar-collapse-1″>

и строку №15:

<div class=»collapse navbar-collapse» id=»bs-example-navbar-collapse-1″>

Если 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>

Я думаю, что такое ссылка и как она создается – объяснять не нужно. Но, если кто не знает, вам сюда.

Строка № 17 – для выделения активного меню, используется класс «active»:

<li class=»active»><a href=»#»>Link</a></li>

Строка №21 – чтобы список выпадал в мобильной версии, во вложенный список ul нужно добавить класс «dropdown-menu»:

<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-fixed-top» (Строка №1):

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

Для того чтобы зафиксировать меню снизу, нужно добавить класс «navbar-fixed-bottom» (Строка №1):

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

Фух , вроде все!

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

А теперь готовое решение для меню на Bootstrap3:

Фиксированные навигационные меню

Меню постоянно будет находиться в верхней либо в нижней части экрана. При прокрутке страницы меню будет всегда на виду и занимать исходное положение.
Нужно добавить дополнительный класс «navbar-fixed-top» для прикрепления меню сверху или «navbar-fixed-bottom» для прикрепления меню снизу к основным классам меню «navbar» и «navbar-default».

Навигационное меню, прикрепленное к верхней части страницы

Класс «navbar-fixed-top»

<nav role=»navigation» class=»navbar navbar-default navbar-fixed-top»> <div class=»container-fluid»> <!— Brand and toggle get grouped for better mobile display —> <div class=»navbar-header»> <button type=»button» data-target=»#navbarCollapse» data-toggle=»collapse» class=»navbar-toggle»> <span class=»sr-only»>Toggle navigation</span> <span class=»icon-bar»></span> <span class=»icon-bar»></span> <span class=»icon-bar»></span> </button> <a href=»#» class=»navbar-brand»>Бренд</a> </div> <!— Collection of nav links and other content for toggling —> <div id=»navbarCollapse» class=»collapse navbar-collapse»> <ul class=»nav navbar-nav»> <li class=»active»><a href=»#»>Главная</a></li> <li><a href=»#»>Статьи</a></li> <li><a href=»#»>Новости</a></li> </ul> <ul class=»nav navbar-nav navbar-right»> <li><a href=»#»>Войти</a></li> </ul> </div> </div> </nav>

Навигационное меню, прикрепленное к нижней части страницы

Класс «navbar-fixed-bottom»

<nav role=»navigation» class=»navbar navbar-default navbar-fixed-bottom»> <div class=»container-fluid»> <!— Brand and toggle get grouped for better mobile display —> <div class=»navbar-header»> <button type=»button» data-target=»#navbarCollapse» data-toggle=»collapse» class=»navbar-toggle»> <span class=»sr-only»>Toggle navigation</span> <span class=»icon-bar»></span> <span class=»icon-bar»></span> <span class=»icon-bar»></span> </button> <a href=»#» class=»navbar-brand»>Бренд</a> </div> <!— Collection of nav links and other content for toggling —> <div id=»navbarCollapse» class=»collapse navbar-collapse»> <ul class=»nav navbar-nav»> <li class=»active»><a href=»#»>Главная</a></li> <li><a href=»#»>Статьи</a></li> <li><a href=»#»>Новости</a></li> </ul> <ul class=»nav navbar-nav navbar-right»> <li><a href=»#»>Войти</a></li> </ul> </div> </div> </nav>

Нефиксированное меню

Обычное меню

<nav role=»navigation» class=»navbar navbar-default»> <!— Brand and toggle get grouped for better mobile display —> <div class=»navbar-header»> <button type=»button» data-target=»#navbarCollapse» data-toggle=»collapse» class=»navbar-toggle»> <span class=»sr-only»>Toggle navigation</span> <span class=»icon-bar»></span> <span class=»icon-bar»></span> <span class=»icon-bar»></span> </button> <a href=»#» class=»navbar-brand»>Бренд</a> </div> <!— Collection of nav links, forms, and other content for toggling —> <div id=»navbarCollapse» class=»collapse navbar-collapse»> <ul class=»nav navbar-nav»> <li class=»active»><a href=»#»>Главная</a></li> <li><a href=»#»>Статьи</a></li> <li><a href=»#»>Новости</a></li> </ul> <ul class=»nav navbar-nav navbar-right»> <li><a href=»#»>Войти</a></li> </ul> </div> </nav>

Статическое меню

<nav role=»navigation» class=»navbar navbar-default navbar-static-top»> <!— Brand and toggle get grouped for better mobile display —> <div class=»navbar-header»> <button type=»button» data-target=»#navbarCollapse» data-toggle=»collapse» class=»navbar-toggle»> <span class=»sr-only»>Toggle navigation</span> <span class=»icon-bar»></span> <span class=»icon-bar»></span> <span class=»icon-bar»></span> </button> <a href=»#» class=»navbar-brand»>Бренд</a> </div> <!— Collection of nav links and other content for toggling —> <div id=»navbarCollapse» class=»collapse navbar-collapse»> <ul class=»nav navbar-nav»> <li class=»active»><a href=»#»>Главная</a></li> <li><a href=»#»>Статьи</a></li> <li><a href=»#»>Новости</a></li> </ul> <ul class=»nav navbar-nav navbar-right»> <li><a href=»#»>Войти</a></li> </ul> </div> </nav>

Как поменять цвет меню?

В строку №1 к классу «navbar» добавьте дополнительно любой придуманный класс, например «red»:

>Выпадающие элементы

Переключайте контекстные оверлеи для отображения списков ссылок и многого другого с помощью модуля выпадающих меню Bootstrap.

Примеры

Оберните «контролирующий» элемент (ссылку или кнопку) выпадающего элемента и выпадающее меню классом .dropdown или другим элементом с position: relative;. При необходимости выпадающие элементы можно запускать из элементов <a> или <button>.

Выпадающие элементы одинарных кнопок

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

Кнопка выпадающего списка <div class=»dropdown»> <button class=»btn btn-secondary dropdown-toggle» type=»button» id=»dropdownMenuButton» data-toggle=»dropdown» aria-haspopup=»true» aria-expanded=»false»> Кнопка выпадающего списка </button> <div class=»dropdown-menu» aria-labelledby=»dropdownMenuButton»> <a class=»dropdown-item» href=»#»>Action</a> <a class=»dropdown-item» href=»#»>Another action</a> <a class=»dropdown-item» href=»#»>Something else here</a> </div> </div>

А вот так — с <a> элементами:

<div class=»dropdown»> <a class=»btn btn-secondary dropdown-toggle» href=»#» role=»button» id=»dropdownMenuLink» data-toggle=»dropdown» aria-haspopup=»true» aria-expanded=»false»> Выпадающая ссылка </a> <div class=»dropdown-menu» aria-labelledby=»dropdownMenuLink»> <a class=»dropdown-item» href=»#»>Action</a> <a class=»dropdown-item» href=»#»>Another action</a> <a class=»dropdown-item» href=»#»>Something else here</a> </div> </div>

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

<!— Example single danger button —> <div class=»btn-group»> <button type=»button» class=»btn btn-danger dropdown-toggle» data-toggle=»dropdown» aria-haspopup=»true» aria-expanded=»false»> Action </button> <div class=»dropdown-menu»> <a class=»dropdown-item» href=»#»>Action</a> <a class=»dropdown-item» href=»#»>Another action</a> <a class=»dropdown-item» href=»#»>Something else here</a> <div class=»dropdown-divider»></div> <a class=»dropdown-item» href=»#»>Separated link</a> </div> </div>

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

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

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

Главная Toggle Dropdown Вторичная Toggle Dropdown Успех Toggle Dropdown Инфо Toggle Dropdown Предупреждение Toggle Dropdown Опасность Toggle Dropdown <!— Example split danger button —> <div class=»btn-group»> <button type=»button» class=»btn btn-danger»>Action</button> <button type=»button» class=»btn btn-danger dropdown-toggle dropdown-toggle-split» data-toggle=»dropdown» aria-haspopup=»true» aria-expanded=»false»> <span class=»sr-only»>Toggle Dropdown</span> </button> <div class=»dropdown-menu»> <a class=»dropdown-item» href=»#»>Action</a> <a class=»dropdown-item» href=»#»>Another action</a> <a class=»dropdown-item» href=»#»>Something else here</a> <div class=»dropdown-divider»></div> <a class=»dropdown-item» href=»#»>Separated link</a> </div> </div>

Размеры

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

Large button Large split button Toggle Dropdown Small button Small split button Toggle Dropdown <!— Large button groups (default and split) —> <div class=»btn-group»> <button class=»btn btn-secondary btn-lg dropdown-toggle» type=»button» data-toggle=»dropdown» aria-haspopup=»true» aria-expanded=»false»> Large button </button> <div class=»dropdown-menu»> … </div> </div> <div class=»btn-group»> <button class=»btn btn-secondary btn-lg» type=»button»> Large button </button> <button type=»button» class=»btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split» data-toggle=»dropdown» aria-haspopup=»true» aria-expanded=»false»> <span class=»sr-only»>Toggle Dropdown</span> </button> <div class=»dropdown-menu»> … </div> </div> <!— Small button groups (default and split) —> <div class=»btn-group»> <button class=»btn btn-secondary btn-sm dropdown-toggle» type=»button» data-toggle=»dropdown» aria-haspopup=»true» aria-expanded=»false»> Small button </button> <div class=»dropdown-menu»> … </div> </div> <div class=»btn-group»> <button class=»btn btn-secondary btn-sm» type=»button»> Small button </button> <button type=»button» class=»btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split» data-toggle=»dropdown» aria-haspopup=»true» aria-expanded=»false»> <span class=»sr-only»>Toggle Dropdown</span> </button> <div class=»dropdown-menu»> … </div> </div>

Направления

«Выпадающий вверх»

Добавьте класс .dropup и выпадающий элемент будет «выпадать» вверх.

Split dropup Toggle Dropdown <!— Default dropup button —> <div class=»btn-group dropup»> <button type=»button» class=»btn btn-secondary dropdown-toggle» data-toggle=»dropdown» aria-haspopup=»true» aria-expanded=»false»> Dropup </button> <div class=»dropdown-menu»> <!— Dropdown menu links —> </div> </div> <!— Split dropup button —> <div class=»btn-group dropup»> <button type=»button» class=»btn btn-secondary»> Split dropup </button> <button type=»button» class=»btn btn-secondary dropdown-toggle dropdown-toggle-split» data-toggle=»dropdown» aria-haspopup=»true» aria-expanded=»false»> <span class=»sr-only»>Toggle Dropdown</span> </button> <div class=»dropdown-menu»> <!— Dropdown menu links —> </div> </div>

«Выпадающий вправо»

Добавьте класс .dropright и выпадающий элемент будет «выпадать» вправо.

Dropright Split dropright Toggle Dropdright <!— Default dropright button —> <div class=»btn-group dropright»> <button type=»button» class=»btn btn-secondary dropdown-toggle» data-toggle=»dropdown» aria-haspopup=»true» aria-expanded=»false»> Dropright </button> <div class=»dropdown-menu»> <!— Dropdown menu links —> </div> </div> <!— Split dropright button —> <div class=»btn-group dropright»> <button type=»button» class=»btn btn-secondary»> Split dropright </button> <button type=»button» class=»btn btn-secondary dropdown-toggle dropdown-toggle-split» data-toggle=»dropdown» aria-haspopup=»true» aria-expanded=»false»> <span class=»sr-only»>Toggle Dropright</span> </button> <div class=»dropdown-menu»> <!— Dropdown menu links —> </div> </div>

«Выпадающий влево»

Добавьте класс .dropleft и выпадающий элемент будет «выпадать» влево.

Toggle Dropleft Split dropleft <!— Default dropleft button —> <div class=»btn-group dropleft»> <button type=»button» class=»btn btn-secondary dropdown-toggle» data-toggle=»dropdown» aria-haspopup=»true» aria-expanded=»false»> Dropleft </button> <div class=»dropdown-menu»> <!— Dropdown menu links —> </div> </div> <!— Split dropleft button —> <div class=»btn-group»> <div class=»btn-group dropleft» role=»group»> <button type=»button» class=»btn btn-secondary dropdown-toggle dropdown-toggle-split» data-toggle=»dropdown» aria-haspopup=»true» aria-expanded=»false»> <span class=»sr-only»>Toggle Dropleft</span> </button> <div class=»dropdown-menu»> <!— Dropdown menu links —> </div> </div> <button type=»button» class=»btn btn-secondary»> Split dropleft </button> </div>

Пункты меню

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

Dropdown Action Another action Something else here <div class=»dropdown»> <button class=»btn btn-secondary dropdown-toggle» type=»button» id=»dropdownMenu2″ data-toggle=»dropdown» aria-haspopup=»true» aria-expanded=»false»> Dropdown </button> <div class=»dropdown-menu» aria-labelledby=»dropdownMenu2″> <button class=»dropdown-item» type=»button»>Action</button> <button class=»dropdown-item» type=»button»>Another action</button> <button class=»dropdown-item» type=»button»>Something else here</button> </div> </div>

Вы также можете создать неинтерактивные выпадающие элементы класса .dropdown-item-text. Свободно стилизуйте их обычным CSS.

Dropdown item text Action Another action Something else here <div class=»dropdown-menu»> <span class=»dropdown-item-text»>Dropdown item text</span> <a class=»dropdown-item» href=»#»>Action</a> <a class=»dropdown-item» href=»#»>Another action</a> <a class=»dropdown-item» href=»#»>Something else here</a> </div>

Активные элементы меню

Добавьте класс .active к элементу выпадающего меню для его стилизации как «активированного».

<div class=»dropdown-menu»> <a class=»dropdown-item» href=»#»>Regular link</a> <a class=»dropdown-item active» href=»#»>Active link</a> <a class=»dropdown-item» href=»#»>Another link</a> </div>

Неактивные элементы меню

Добавьте класс .disabled к элементу выпадающего меню для его стилизации как «деактивированного».

<div class=»dropdown-menu»> <a class=»dropdown-item» href=»#»>Regular link</a> <a class=»dropdown-item disabled» href=»#»>Disabled link</a> <a class=»dropdown-item» href=»#»>Another link</a> </div>

Выравнивание меню

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

Внимание! Выпадающие элементы позиционируются благодаря Popper.js (за исключением случаев, когда они содержатся в navbar).

Right-aligned menu Action Another action Something else here <div class=»btn-group»> <button type=»button» class=»btn btn-secondary dropdown-toggle» data-toggle=»dropdown» aria-haspopup=»true» aria-expanded=»false»> Right-aligned menu </button> <div class=»dropdown-menu dropdown-menu-right»> <button class=»dropdown-item» type=»button»>Action</button> <button class=»dropdown-item» type=»button»>Another action</button> <button class=»dropdown-item» type=»button»>Something else here</button> </div> </div>

Заголовки меню

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

Dropdown header

Action Another action <div class=»dropdown-menu»> <h6 class=»dropdown-header»>Dropdown header</h6> <a class=»dropdown-item» href=»#»>Action</a> <a class=»dropdown-item» href=»#»>Another action</a> </div>

Разделители меню

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

<div class=»dropdown-menu»> <a class=»dropdown-item» href=»#»>Action</a> <a class=»dropdown-item» href=»#»>Another action</a> <a class=»dropdown-item» href=»#»>Something else here</a> <div class=»dropdown-divider»></div> <a class=»dropdown-item» href=»#»>Separated link</a> </div>

Текст меню

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

Some example text that’s free-flowing within the dropdown menu.

And this is more example text.

<div class=»dropdown-menu p-4 text-muted» style=»max-width: 200px;»> <p> Some example text that’s free-flowing within the dropdown menu. </p> <p class=»mb-0″> And this is more example text. </p> </div>

Формы меню

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

<div class=»dropdown-menu»> <form class=»px-4 py-3″> <div class=»form-group»> <label for=»exampleDropdownFormEmail1″>Email address</label> <input type=»email» class=»form-control» id=»exampleDropdownFormEmail1″ placeholder=»email@example.com»> </div> <div class=»form-group»> <label for=»exampleDropdownFormPassword1″>Password</label> <input type=»password» class=»form-control» id=»exampleDropdownFormPassword1″ placeholder=»Password»> </div> <div class=»form-check»> <input type=»checkbox» class=»form-check-input» id=»dropdownCheck»> <label class=»form-check-label» for=»dropdownCheck»> Remember me </label> </div> <button type=»submit» class=»btn btn-primary»>Sign in</button> </form> <div class=»dropdown-divider»></div> <a class=»dropdown-item» href=»#»>New around here? Sign up</a> <a class=»dropdown-item» href=»#»>Forgot password?</a> </div> <form class=»dropdown-menu p-4″> <div class=»form-group»> <label for=»exampleDropdownFormEmail2″>Email address</label> <input type=»email» class=»form-control» id=»exampleDropdownFormEmail2″ placeholder=»email@example.com»> </div> <div class=»form-group»> <label for=»exampleDropdownFormPassword2″>Password</label> <input type=»password» class=»form-control» id=»exampleDropdownFormPassword2″ placeholder=»Password»> </div> <div class=»form-check»> <input type=»checkbox» class=»form-check-input» id=»dropdownCheck2″> <label class=»form-check-label» for=»dropdownCheck2″> Remember me </label> </div> <button type=»submit» class=»btn btn-primary»>Sign in</button> </form>

Параметры раскрывающегося списка

Используйте data-offset или data-reference, чтобы изменить местоположение раскрывающегося списка.

Offset Reference Toggle Dropdown <div class=»d-flex»> <div class=»dropdown mr-1″> <button type=»button» class=»btn btn-secondary dropdown-toggle» id=»dropdownMenuOffset» data-toggle=»dropdown» aria-haspopup=»true» aria-expanded=»false» data-offset=»10,20″> Offset </button> <div class=»dropdown-menu» aria-labelledby=»dropdownMenuOffset»> <a class=»dropdown-item» href=»#»>Action</a> <a class=»dropdown-item» href=»#»>Another action</a> <a class=»dropdown-item» href=»#»>Something else here</a> </div> </div> <div class=»btn-group»> <button type=»button» class=»btn btn-secondary»>Reference</button> <button type=»button» class=»btn btn-secondary dropdown-toggle dropdown-toggle-split» id=»dropdownMenuReference» data-toggle=»dropdown» aria-haspopup=»true» aria-expanded=»false» data-reference=»parent»> <span class=»sr-only»>Toggle Dropdown</span> </button> <div class=»dropdown-menu» aria-labelledby=»dropdownMenuReference»> <a class=»dropdown-item» href=»#»>Action</a> <a class=»dropdown-item» href=»#»>Another action</a> <a class=»dropdown-item» href=»#»>Something else here</a> <div class=»dropdown-divider»></div> <a class=»dropdown-item» href=»#»>Separated link</a> </div> </div> </div>

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

Через атрибуты или JavaScript, плагин выпадающих элементов изменяет (показывает скрытоесодержимое) состояние содержимого (выпадающие меню) изменением класса .show элемента родительского списка. Атрибут data-toggle=»dropdown» отвечает за закрытие выпадающих меню на уровне приложения, так что будет неплохой идеей всегда использовать данный атрибут.

На устройствах, активируемых касанием, открытие выпадающего элемента добавляет пустые обработчики ($.noop) mouseover к непосредственным «детям» элемента <body>. Этот, по общему мнению, некрасивый хак (без которого любое касание в iOS вне выпадающего элемента не закроет выпадающий элемент) необходим для обработки проблемы с делегированием событий в iOS. Как только выпадающий элемент закрыт, эти дополнительные пустые обработчики удаляются.

Через атрибуты

Добавьте к ссылке или кнопке атрибут data-toggle=»dropdown» для скрытия\показа выпадающего элемента.

<div class=»dropdown»> <button id=»dLabel» type=»button» data-toggle=»dropdown» aria-haspopup=»true» aria-expanded=»false»> Dropdown trigger </button> <div class=»dropdown-menu» aria-labelledby=»dLabel»> … </div> </div>

Через JS

Управляйте выпадающими элементами с помощью JavaScript:

$(‘.dropdown-toggle’).dropdown()

data-toggle=»dropdown» still required

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

Параметры

Передавайте параметры через JavaScript или атрибуты. Если используются атрибуты, добавляйте название параметра к data- как в data-offset=»».

Название Тип По умолч. Описание
offset number | string | function 0 Смещение выпадающего элемента относительно его триггера. См. отступы Popper.js
flip boolean true Позволяет выпадающему элементу «перевернуться», если произошло перекрытие другого элемента. Больше информации: flip docs.
boundary string | element ‘scrollParent’ Граница ограничения переполнения выпадающего меню. Принимает значения ‘viewport’, ‘window’, ‘scrollParent’ или ссылку HTMLElement (только для JavaScript). Для получения дополнительной информации обратитесь к документации preventOverflow от Popper.js.
reference string | element ‘toggle’ Reference element of the dropdown menu. Accepts the values of ‘toggle’, ‘parent’, or an HTMLElement reference. For more information refer to Popper.js’s referenceObject docs.
display string dynamic | static By default, we use Popper.js for dynamic positioning. Disable this with `static`.

Обратите внимание, что если для boundary установлено значение, отличное от ‘scrollParent’, позиция position: static применяется к контейнеру .dropdown.

Методы

Метод Описание
$().dropdown(‘toggle’) Задействует поведение toggle в выпадающем меню данного навбара или при навигации «TAB»ом.
$().dropdown(‘update’) Обновляет позицию «выпадения» элемента.
$().dropdown(‘dispose’) Уничтожает выпадающий элемент.

События

Все события выпадающих элементов наступают в родительском элементе класса .dropdown-menu и несут свойство relatedTarget, значение которого равно элементу «якоря» (ссылка, т.е. <a>), запускающего функциональность toggle.

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

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

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