Выпадающее меню в 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 - определяет элемент (или элементы), который маркирует текущий элемент. Он предоставляет пользователю узнаваемое имя объекта.

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

Для того, чтобы выровнять меню по правой части элемента, вы должны добавить класс .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>

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

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

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


*