Выпадающее меню

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

Пример

Вот пример выпадающего меню.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <div class="dropdown"> <button class="btn btn-primary dropdown-toggle" type="button" id="about-us" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">О нас</button> <div class="dropdown-menu" aria-labelledby="about-us"> <a class="dropdown-item" href="#">Наша история</a> <a class="dropdown-item" href="#">Наша команда</a> <a class="dropdown-item" href="#">Контакты</a> </div> </div> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

Объяснение кода

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

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

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

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

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

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

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

Bootstrap 4 против Bootstrap 3

Bootstrap 4 использует другую технику для создания выпадающих меню по сравнению с Bootstrap 3.

Bootstrap 3 применяет выпадающее меню к спискам (используя <ul> и <li>), тогда как в Bootstrap 4 вы можете применить раскрывающееся меню к элементу <ul> или к элементу <div>.

В Bootstrap 4 вы применяете элемент .dropdown к элементу <a> или <button> и применяете класс .dropdown-menu к обёртке.

Всплывающее меню

Вы можете изменить выпадающее меню, чтобы оно стало «всплывающим». Для этого используйте .dropup вместо .dropdown у родительского элемента.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <div class="dropup"> <button class="btn btn-primary dropdown-toggle" type="button" id="about-us" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">О нас</button> <div class="dropdown-menu" aria-labelledby="about-us"> <a class="dropdown-item" href="#">Наша история</a> <a class="dropdown-item" href="#">Наша команда</a> <a class="dropdown-item" href="#">Контакты</a> </div> </div> <!-- Добавляем немного места, чтобы меню не исчезало из области просмотра --> <style scoped> .dropup {margin-top: 140px;} </style> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

Выравнивание справа

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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <div class="dropdown"> <button class="btn btn-primary dropdown-toggle" type="button" id="about-us" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Эта широкая кнопка демонстрирует выравнивание </button> <div class="dropdown-menu dropdown-menu-right" aria-labelledby="about-us"> <a class="dropdown-item" href="#">Наша история</a> <a class="dropdown-item" href="#">Наша команда</a> <a class="dropdown-item" href="#">Контакты</a> </div> </div> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

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

Добавьте заголовок в выпадающее меню путём применения класса .dropdown-header к элементу заголовка (<h1><h6>).

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <div class="dropdown"> <button class="btn btn-primary dropdown-toggle" type="button" id="about-us" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">О нас</button> <div class="dropdown-menu" aria-labelledby="about-us"> <h6 class="dropdown-header">О компании</h6> <a class="dropdown-item" href="#">Наша история</a> <a class="dropdown-item" href="#">Наша команда</a> <h6 class="dropdown-header">Контакты</h6> <a class="dropdown-item" href="#">Колл-центр</a> <a class="dropdown-item" href="#">Магазины</a> </div> </div> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

Bootstrap 4 против Bootstrap 3

Bootstrap 3 применяет класс .dropdown-header к элементу <li> (потому что для построения выпадающих меню Bootstrap 3 использовал списки). Bootstrap 4 применяет класс .dropdown-header к элементам заголовка.

Разделители

Добавьте разделители в выпадающее меню, применяя класс .dropdown-divider к элементу <div>.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <div class="dropdown"> <button class="btn btn-primary dropdown-toggle" type="button" id="about-us" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">О нас</button> <div class="dropdown-menu" aria-labelledby="about-us"> <a class="dropdown-item" href="#">Наша история</a> <a class="dropdown-item" href="#">Наша команда</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Контакты</a> </div> </div> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

Bootstrap 4 против Bootstrap 3

Bootstrap 3 применяет класс .divider к элементу <li> (потому что для построения выпадающих меню Bootstrap 3 использовал списки). Bootstrap 4 использует вместо этого класс .dropdown-divider и применяет его к элементу <div>.

Отключенные пункты меню

Отключите пункт меню, применив класс .disabled к соответствующему элементу <a>.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <div class="dropdown"> <button class="btn btn-primary dropdown-toggle" type="button" id="about-us" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">О нас</button> <div class="dropdown-menu" aria-labelledby="about-us"> <a class="dropdown-item" href="#">Наша история</a> <a class="dropdown-item" href="#">Наша команда</a> <a class="dropdown-item disabled" href="#">Контакты</a> </div> </div> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

Bootstrap 4 против Bootstrap 3

Bootstrap 3 применяет класс .disabled к элементу <li>, Bootstrap 4 применяет его к элементу <a>.

Автор и редакторы

Автор: Йен Диксон
Последнее изменение: 12.03.2020
Редакторы: Влад Мержевич
Как научиться разрабатывать сайты