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