Выпадающее меню в Bootstrap 4 (dropdown)

Выпадающее меню в Bootstrap 4 (dropdown)

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

Вот пример выпадающего списка в Bootstrap 4:

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" id="about-us" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">About Us</button>
  <div class="dropdown-menu" aria-labelledby="about-us">
    <a class="dropdown-item" href="#">Our Story</a>
    <a class="dropdown-item" href="#">Our Team</a>
    <a class="dropdown-item" href="#">Contact Us</a>
  </div>
</div>

Создание выпадающего меню

Выпадающий список сделан исключительно с помощью HTML-разметки. Bootstrap обрабатывает JavaScript за кулисами.

Вот ключевые шаги для создания выпадающего меню Bootstrap:

  1. Оберните выпадающий элемент триггера внутри элемента с помощью класса Bootstrap .dropdown.
  2. Добавьте в Bootstrap класс .dropdown-toggle и добавьте data-toggle="dropdown" к элементу триггера (то есть к элементу, на который пользователи нажимают, чтобы развернуть раскрывающийся список). В приведенном выше примере триггером является элемент <button>.
  3. Оберните все выпадающие элементы в <div> с классом .dropdown-menu
  4. Каждый выпадающий элемент использует элемент <a> (но может также использовать элемент <button>) с классом .dropdown-item.

Об атрибутах ARIA

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

  • aria-haspopup - указывает, что элемент имеет всплывающее контекстное меню или выпадающее меню. Его значение может быть либо true (у элемента есть всплывающее окно), либо false (у элемента нет всплывающего окна).
  • aria-expanded - указывает, является ли элемент или другой элемент группs, которым он управляет, в данный момент развернутым или свернутым. Возможные значения: true, false и undefined (по умолчанию).
  • aria-labelledby - определяет элемент (или элементы), который маркирует текущий элемент. Он предоставляет пользователю узнаваемое имя объекта.

Выравнивание по правой части

блок 1

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

Заголовки выпадающего меню

Иногда требуется разделить элементы выпадающего меню на отдельные группы. Для этого вы можете использовать заголовки внутри этого выпадающего меню с классами .dropdown-header. Давайте рассмотрим пример:

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" id="about-us" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">About Us</button>
  <div class="dropdown-menu" aria-labelledby="about-us">
    <h6 class="dropdown-header">Company Information</h6>
    <a class="dropdown-item" href="#">Our Story</a>
    <a class="dropdown-item" href="#">Our Team</a>
    <h6 class="dropdown-header">Contact Us</h6>
    <a class="dropdown-item" href="#">Call Center</a>
    <a class="dropdown-item" href="#">Store Locations</a>
  </div>
</div>

Разделители в выпадающем меню

Так же, в качестве разделителей можно использовать полоски толщиной в 1 пиксель. Для этого добавьте элемент меню с классом .dropdown-divider:

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" id="about-us" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">About Us</button>
  <div class="dropdown-menu" aria-labelledby="about-us">
    <a class="dropdown-item" href="#">Our Story</a>
    <a class="dropdown-item" href="#">Our Team</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Contact Us</a>
  </div>
</div>
блок 3

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

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

Ваш электронный адрес не будет опубликован.


*