Как создать выпадающее меню на Bootstrap?

@roma 

Выпадающее меню является одним из наиболее распространенных элементов интерфейса на сайтах, и Bootstrap предоставляет простой способ создания таких меню.

Для создания выпадающего меню на Bootstrap вы можете использовать компонент "Dropdown" (выпадающий список). Для этого вам нужно добавить несколько элементов HTML и использовать JavaScript для открытия и закрытия меню.

Приведенный ниже код показывает, как создать простое выпадающее меню на Bootstrap:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

<!-- Поместите следующий код внутри вашего HTML-документа -->
<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Выпадающее меню
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Пункт 1</a>
    <a class="dropdown-item" href="#">Пункт 2</a>
    <a class="dropdown-item" href="#">Пункт 3</a>
  </div>
</div>

Как видно из примера, первый элемент button служит для отображения заголовка выпадающего меню, а также для вызова выпадающего списка при клике на него. Класс dropdown-toggle задает стили для кнопки, чтобы она выглядела как ссылка.

Следующий элемент div с классом dropdown-menu содержит пункты меню. Класс dropdown-menu определяет стили для выпадающего списка, а атрибут aria-labelledby связывает выпадающий список с кнопкой, чтобы скринридеры могли правильно интерпретировать отношение между кнопкой и списком.

Для активации функционала выпадающего списка в Bootstrap используется JavaScript. Bootstrap поставляется с встроенным JavaScript-кодом, но для его работы необходимо подключение библиотеки jQuery. Вы можете включить jQuery и стандартную библиотеку Bootstrap в своем проекте, добавив следующий код перед закрывающим тегом </body>:

1
2
3

<!-- Подключение jQuery и Bootstrap -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-pmX8FvDDx3qg3pjkZcr+MB4l4vJ4KjQHyYlR1W6X8e6x0HR0ux