bootstrap пример выпадающего меню
В этой статье рассмотрим, как в Bootstrap осуществляется добавление выпадающего меню к кнопкам, основному меню, вкладкам и другим компонентам этого фреймворка.
Что такое выпадающий список
Выпадающий список – это элемент интерфейса, обычно представляющий собой некоторое меню, которое показывается только после того, как пользователь нажал на некоторый элемент или навёл на него курсор. В большинстве случаев в качестве такого элемента выступает кнопка или пункт меню. Для того чтобы указать что этот элемент имеет dropdown меню, обычно рядом с его содержимым отображается стрелка, направленная вниз.
Кнопка с выпадающим меню
В Bootstrap создание кнопки или ссылки с выпадающим меню начинается с создания обёртки (элемента div с классом dropdown ).
Класс dropdown используется для установки этому элементу относительного позиционирования ( position: relative ).
Пример HTML кода для создания кнопки с выпадающим меню на Bootstrap 4:
Пример создания кнопки с dropdown на Bootstrap 3:
Выпадающие списки для кнопок через разделитель
Выпадающие меню для кнопок, объединенных в группу
На следующем примере показана возможность добавления выпадающего меню для кнопки, которая находится в группе кнопок (.btn-group):
Создания выпадающего меню, открывающегося вверх
Создание выпадающих меню с помощью Twitter Bootstrap
Вы можете добавить выпадающие меню к большинству компонентов Twitter Bootstrap (кнопки, навигационное меню, вкладки и т.д.) с помощью плагина dropdown (выпадающий список).
Выпадающие списки в навигационном меню (navbar)
Добавление выпадающих списков к элементам навигационного меню:
Выпадающие списки в навигационных панелях (navs)
Добавление выпадающих списков к элементам навигационных панелей navs:
Добавление выпадающих меню (Dropdowns) с помощью Data Attributes
Ниже представлена возможность добавления выпадающего меню к ссылке с помощью data attributes:
Добавление выпадающих меню с помощью JavaScript
Примечание: Использование атрибута data-toggle=»dropdown» является необходимым условием для добавления к компоненту выпадающего списка, независимо от того, вызываете ли вы dropdown (выпадающий список) через JavaScript или data-api (data attributes).
Параметры и методы плагина dropdowns
Этот метод показывает или скрывает (т.е. переключает из одного состояния в другое) выпадающее меню для указанного с помощью селектора (идентификатора или класса) элемента веб-страницы. Демонстрация этого метода рассмотрена в вышеприведенном примере.
События плагина dropdowns
Комментарии:
Добрый день, внимательно прочитала статью, но все-таки не смогла решить свою проблему.
У меня есть меню, в котором не работает родительский пункт. Пока что смогла настроить выпадающее меню при наведении и ссылки в нем работают как надо. Но непременно нужно сделать родительский пункт кликабельным. Приведенный вами скрипт загружала, но он не сработал. допуская, что вставляла не туда или не так. 
вот код из header.php, могу скопировать любой нужный код из других файлов
Как всегда отличный материал. Огромное спасибо за труд. Помогите мне, хотя бы мыслью, где искать ошибку? На сайте меню вида:
На десктопе все отлично 1 рис. А на мобилке начинается какой-то треш 2 рис. При нажатии на меню оно выпадает, когда нажимаешь, допустим на ПРОЕКТЫ то подпункты заливаются цветом ссылки и не работают, интересно, что последний пункт КОНТАКТЫ работает как должен, остальные нет.
Подскажите где искать, что редактировать?
Думаю, что дело в них:
.nav-outer <
background-color: #041931;
>
.navbar <
border-radius: 0;
border:none;
margin-bottom: 0px!important;
>
.navbar-default <
background-color: #041931;
border: none;
>
.navbar-header <
border: none;
padding: 0;
>
.logo img <
height: 33px;
width: 134px;
float: left;
margin-top: 13px;
margin-left: 15px;
>
.navbar-nav <
list-style-type: none;
text-align: center;
float: right;
border: none;
>
.navbar-toggle <
background-color: #FF3B09;
border: none;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
margin: 10px 0;
right: 10px;
width: 30px;
height: 30px;
>
.dropdown-menu <
background-color: #041931;
>
Выпадающие списки
Переключайте контекстные наложения для отображения списков ссылок и многого другого с помощью плагина выпадающего списка Bootstrap.
Обзор
Доступность
The WAI ARIA стандарт определяет фактический виджет role=»menu» widget, но это характерно для меню, похожего на приложение, которое запускает действия или функции. Меню ARIA могут содержать только пункты меню, пункты меню флажков, пункты меню радиокнопок, группы радиокнопок и подменю.
Примеры
Отдельная кнопка
Самое приятное то, что Вы можете сделать это и с любым вариантом кнопки:
Отдельная кнопка
Размеры
Выпадающие списки кнопок работают с кнопками любого размера, включая кнопку по умолчанию и разделенную кнопку выпадающего списка.
Темные выпадающие списки
И использовать его в навигационной панели:
Направления
Вверх
Вправо
Влево
Элементы меню
Активный
Отключенный
Выравнивание меню
Отзывчивое выравнивание
Если Вы хотите использовать адаптивное выравнивание, отключите динамическое позиционирование, добавив атрибут data-bs-display=»static» и используйте гибкие классы вариантов.
Обратите внимание, что Вам не нужно добавлять атрибут data-bs-display=»static» к кнопке выпадающего списка в навигационных панелях, поскольку Popper не используется в навигационных панелях.
Варианты выравнивания
Воспользовавшись большинством вариантов, показанных выше, вот небольшая демонстрация кухонной мойки с различными вариантами выравнивания раскрывающегося списка в одном месте.
Содержание меню
Заголовки
Добавьте заголовок для обозначения разделов действий в любом выпадающем меню.
Заголовок выпадающего списка
Разделители
Разделите группы связанных пунктов меню разделителем.
Текст
Поместите произвольный текст в выпадающее меню с текстом и используйте утилиты отступов. Обратите внимание, что Вам, вероятно, потребуются дополнительные стили размеров, чтобы ограничить ширину меню.
Пример текста, который свободно перемещается в выпадающем меню.
И это еще один пример текста.
Формы
Поместите форму в выпадающее меню или превратите ее в выпадающее меню и используйте утилиты полей или отступов, чтобы дать ей необходимое отрицательное пространство.
Параметры выпадающего списка
Поведение автоматического закрытия
Переменные
Переменные для всех выпадающих списков:
Переменные для курсоров на основе CSS, которые указывают на интерактивность раскрывающегося списка:
Миксины
Использование
Через атрибуты данных
Добавьте data-bs-toggle=»dropdown» к ссылке или кнопке, чтобы переключить выпадающий список.
Через JavaScript
Вызов выпадающих списков через JavaScript:
data-bs-toggle=»dropdown» по-прежнему требуется
Параметры
Смещение раскрывающегося списка относительно его цели. Вы можете передать строку в атрибутах данных со значениями, разделенными запятыми, например: data-bs-offset=»10,20″
Дополнительную информацию смотрите в offset документации Popper.
Смещение раскрывающегося списка относительно его цели. Вы можете передать строку в атрибутах данных со значениями, разделенными запятыми, например: data-bs-offset=»10,20″
Дополнительную информацию смотрите в offset документации Popper.
Настройте поведение автоматического закрытия раскрывающегося списка:
Настройте поведение автоматического закрытия раскрывающегося списка:
Чтобы изменить конфигурацию Popper по умолчанию для Bootstrap, смотрите конфигурацию Popper.
Когда функция используется для создания конфигурации Popper, она вызывается с объектом, который содержит конфигурацию Popper по умолчанию для Bootstrap. Это поможет Вам использовать и объединить настройки по умолчанию с Вашей собственной конфигурацией. Функция должна возвращать объект конфигурации для Popper.
Использование функции с popperConfig
Методы
| Метод | Описание |
|---|---|
| toggle | Переключает выпадающее меню данной панели навигации или навигации с вкладками. |
| show | Показывает выпадающее меню данной панели навигации или навигации с вкладками. |
| hide | Скрывает выпадающее меню данной панели навигации или навигации с вкладками. |
| update | Обновляет положение выпадающего списка элемента. |
| dispose | Уничтожает выпадающий список элемента. (Удаляет сохраненные данные в элементе DOM) |
| getInstance | Статический метод, который позволяет вам получить экземпляр раскрывающегося списка, связанный с элементом DOM, вы можете использовать его следующим образом: bootstrap.Dropdown.getInstance(element) |
| getOrCreateInstance | Статический метод, который возвращает раскрывающийся список, связанный с элементом DOM, или создает новый, если он не был инициализирован. Вы можете использовать это так: bootstrap.Dropdown.getOrCreateInstance(element) |
События
Все выпадающие события запускаются в переключающемся элементе, а затем всплывают. Таким образом, Вы также можете добавить прослушивателей событий в родительский элемент. hide.bs.dropdown и hidden.bs.dropdown имеют свойство clickEvent (только если исходный тип события click ), который содержит объект события для события клика.
| Метод | Описание |
|---|---|
| show.bs.dropdown | Срабатывает немедленно при вызове метода экземпляра show. |
| shown.bs.dropdown | Запускается, когда выпадающий список становится видимым для пользователя и переходы CSS завершены. |
| hide.bs.dropdown | Срабатывает немедленно при вызове метода экземпляра hide. |
| hidden.bs.dropdown | Запускается, когда выпадающий список перестает быть скрытым от пользователя и переходы CSS завершены. |
Dropdowns (выпадающие списки)
Переключайте контекстные наложения для отображения списков ссылок и многого другого с помощью плагина раскрывающегося списка Bootstrap.
Обзор
Выпадающие списки созданы на основе сторонней библиотеки Popper.js, которая обеспечивает динамическое позиционирование и обнаружение области просмотра. Обязательно включите popper.min.js перед JavaScript в Bootstrap или используйте bootstrap.bundle.min.js /, bootstrap.bundle.js который содержит Popper.js. Popper.js не используется для размещения раскрывающихся списков на панели навигации, хотя динамическое позиционирование не требуется.
Доступность
Стандарт WAI ARIA определяет фактический role=»menu» виджет, но он специфичен для меню, похожего на приложения, которое запускает действия или функции. Меню ARIA могут содержать только пункты меню, пункты меню флажков, пункты меню радиокнопок, группы радиокнопок и подменю.
Примеры
Одна кнопка
Самое приятное то, что вы можете сделать это и с любым вариантом кнопки:
Кнопка разделения
Мы используем этот дополнительный класс, чтобы уменьшить горизонтальность padding по обе стороны от курсора на 25% и удалить margin-left добавляемый для обычных раскрывающихся списков кнопок. Эти дополнительные изменения удерживают курсор в центре разделенной кнопки и обеспечивают область нажатия более подходящего размера рядом с основной кнопкой.
Размеры
Выпадающие кнопки работают с кнопками всех размеров, включая кнопки по умолчанию и кнопки с разделенным раскрывающимся списком.
Темные выпадающие списки
И использовать его в навигационной панели:
Направления
Dropup
Dropright
Dropleft
Пункты меню
Active (активный)
Disabled (отключенный)
Выравнивание меню
Отзывчивое выравнивание
Обратите внимание, что вам не нужно добавлять атрибут data-display=»static» к раскрывающимся кнопкам на панели навигации, поскольку Popper.js не используется в панелях навигации.
Содержание меню
Заголовки
Добавьте заголовок для обозначения разделов действий в любом раскрывающемся меню.
Dropdown header
Разделители
Разделите группы связанных пунктов меню разделителем.
Текст
Поместите произвольный текст в раскрывающееся меню с текстом и используйте служебные программы для определения интервалов. Обратите внимание, что вам, вероятно, потребуются дополнительные стили размеров, чтобы ограничить ширину меню.
Some example text that’s free-flowing within the dropdown menu.
And this is more example text.
Формы
Поместите форму в раскрывающееся меню или превратите ее в раскрывающееся меню и используйте утилиты полей или заполнения, чтобы дать ей необходимое отрицательное пространство.
Параметры раскрывающегося списка
Применение
Через атрибуты данных
Добавьте data-toggle=»dropdown» ссылку или кнопку, чтобы переключить раскрывающийся список.
Через JavaScript
Вызов выпадающих списков через JavaScript:
data-toggle=»dropdown» все еще требуется
Независимо от того, вызываете ли вы раскрывающийся список через JavaScript или вместо этого используете data-api, data-toggle=»dropdown» всегда требуется присутствие в элементе триггера раскрывающегося списка.