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>