@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 |