Переключайте контекстные наложения для отображения списков ссылок и многого другого с помощью плагина выпадающего списка 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 завершены.
Переключайте контекстные наложения для отображения списков ссылок и многого другого с помощью плагина раскрывающегося списка Bootstrap.
Обзор
Доступность
Примеры
Одна кнопка
Самое приятное то, что Вы можете сделать это и с любым вариантом кнопки:
Раздельная кнопка
Размеры
Выпадающие кнопки работают с кнопками всех размеров, включая кнопки по умолчанию и кнопки с разделенным раскрывающимся списком.
Направления
Выпадающий вверх
Выпад вправо
Выпадающий влево
Пункты меню
Активный
Отключенный
Выравнивание меню
Адаптивное выравнивание
Если Вы хотите использовать адаптивное выравнивание, отключите динамическое позиционирование, добавив атрибут data-display=»static» и используйте гибкие классы вариантов.
Обратите внимание, что Вам не нужно добавлять атрибут data-display=»static» к кнопкам раскрывающегося списка на панели навигации, поскольку Popper не используется в панелях навигации.
Содержание меню
Заголовки
Добавьте заголовок для обозначения разделов действий в любом раскрывающемся меню.
Заголовок раскрывающегося списка
Разделители
Разделите группы связанных пунктов меню разделителем.
Текст
Поместите произвольный текст в раскрывающееся меню с текстом и используйте утилиты отступа. Обратите внимание, что Вам, вероятно, потребуются дополнительные стили размеров, чтобы ограничить ширину меню.
Пример текста, который свободно перемещается в раскрывающемся меню.
И это еще один пример текста.
Формы
Поместите форму в раскрывающееся меню или превратите ее в раскрывающееся меню и используйте утилиты полей или отступов, чтобы дать ей необходимое отрицательное пространство.
Параметры раскрывающегося списка
Применение
Через атрибуты данных
Добавьте data-toggle=»dropdown» к ссылке или кнопке, чтобы переключить раскрывающийся список.
Через JavaScript
Вызов выпадающих списков через JavaScript:
data-toggle=»dropdown» все еще требуется
Параметры
Имя
Тип
По умолчанию
Описание
offset
number | string | function
0
Смещение раскрывающегося списка относительно его цели.
Когда функция используется для определения смещения, она вызывается с объектом, содержащим данные смещения в качестве первого аргумента. Функция должна возвращать объект с такой же структурой. Узел DOM запускающего элемента передается как второй аргумент.
Дополнительную информацию смотрите в документации Popper по смещению.
Переключайте контекстные оверлеи для отображения списков ссылок и многого другого с помощью модуля выпадающих меню Bootstrap.
Обзор
Доступность
Стандарт WAI ARIA описывает и определяет виджет role=»menu» как настоящий виджет, но лишь для меню «а-ля приложение», запускающих действия или функции. Меню ARIA могут содержать лишь пункты меню, чекбоксы, «радио-кнопки», группы «радио-кнопок» и подменю.
Примеры
Выпадающие элементы одинарных кнопок
Самое забавное, что это можно сделать с любым из вариантов кнопок: «главная, вторичная, успех, инфо, предупреждение, опасность»:
Выпадающие элементы кнопок с разделенными зонами
Размеры
Выпадающие элементы кнопок работают с кнопками любых размеров, включая кнопки по умолчанию и кнопки с выпадающими элементами с разделенными зонами.
Направления
«Выпадающий вверх»
«Выпадающий вправо»
«Выпадающий влево»
Пункты меню
Активные элементы меню
Неактивные элементы меню
Выравнивание меню
Внимание! Выпадающие элементы позиционируются благодаря Popper.js (за исключением случаев, когда они содержатся в navbar).
Отзывчивое выравнивание
Обратите внимание, что вам не нужно добавлять атрибут 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» для скрытия\показа выпадающего элемента.
Через JS
Управляйте выпадающими элементами с помощью JavaScript:
data-toggle=»dropdown» still required
Независимо от того, управляете вы выпадающим элементом через JavaScript или атрибутами, атрибут data-toggle=»dropdown» всегда необходим в элементе, запускающем выпадающий элемент.
Параметры
Название
Тип
По умолч.
Описание
offset
number | string | function
0
Смещение раскрывающегося списка относительно его цели.
Когда функция используется для определения смещения, она вызывается с объектом, содержащим данные смещения в качестве первого аргумента. Функция должна возвращать объект с такой же структурой. Узел DOM запускающего элемента передается в качестве второго аргумента.
Смещение выпадающего элемента относительно его триггера. См. отступы Popper.js
Методы
Метод
Описание
$().dropdown(‘toggle’)
Задействует поведение toggle в выпадающем меню данного навбара или при навигации «TAB»ом.
$().dropdown(‘show’)
Показывает выпадающее меню данной навигационной панели или вкладки.
$().dropdown(‘hide’)
Скрывает выпадающее меню данной навигационной панели или вкладки.
От автора: я приветствую вас. Сегодня мы рассмотрим, как сделать на Bootstrap выпадающее меню. С нуля для этого вам пришлось бы написать энное количество кода, с помощью фреймворка же это сделать намного проще.
Как всегда нам поможет документация. Я уже не знаю, сколько раз я обращался к ней в этом цикле статей. Но действительно достаточно всего лишь смотреть и в нее и копировать оттуда примеры. Например, вот код для формирования простого выпадающего меню, где оба пункта являются выпадающими:
Фреймворк Bootstrap 5. Быстрый старт
Изучите основы Bootstrap 5 на практическом примере по верстке интернет-магазина с нуля
Итак, за реализацию одного выпадающего пункта меню можно использовать отдельный блок с классом dropdown, в него нужно вложить ссылку или кнопку, при клике по которой будет непосредственно раскрываться меню. Для ссылки (или кнопки) обязательным атрибутом является data-toggle = dropdown, чтобы меню корректно открывалось.
Ну а сами пункты выпадающего меню формируются списком. Пункт списка с классом divider позволяет нарисовать красивый простой разделитель между пунктами.
Возможно, придется подкорректировать отображение пунктов, поставить их в ряд, потому что изначально dropdown – блочный элемент. Я прописал некоторые стили для стилизации:
Пункты списка выпадающего меню также можно оформить по вашему усмотрению.
Фреймворк Bootstrap 5. Быстрый старт
Изучите основы Bootstrap 5 на практическом примере по верстке интернет-магазина с нуля
Кнопка-выпадающее меню
Код подойдет тот же самый, только вместо ссылка вставьте кнопку, а общему контейнеру вместо класса dropdown укажите btn-group:
Отличие кнопки от ссылки в том, что кнопке не нужно прописывать стили, в отличие от ссылки. Также размеры кнопки можно легко менять с помощью классов btn-lg|md|sm|xs. Также выпадающее меню можно сделать с раздельными кнопками, этот пример вы можете посмотреть в документации.
Выпадающее меню как часть горизонтального меню
Если вам нужно сделать выпадающее пункт меню в горизонтальной навигации, наиболее удобно будет использовать такой код:
Таких пунктов в навигации вы можете разместить несколько и они будут располагаться в одну строку, можете попробовать.
Как сделать в Bootstrap выпадающее меню при наведении на пункт?
К сожалению, по умолчанию в Bootstrap нет такой возможности, все выпадающие меню выпадают только при клике по пункту. Но не будем забывать, что фреймворк имеет полностью открытый исходный код, поэтому возможность выпадания при наведении курсора вы можете добавить в фреймворк самостоятельно.
У нас на сайте уже были статьи о том, как сделать выпадающую навигацию при наведении, можете почитать их или найти эту информацию в других источниках.
Что ж, ну а я на этом буду заканчивать сегодняшнюю достаточно короткую статью, примеры мы разобрали и я думаю, что для вас теперь не составит труда реализовывать такие навигации с помощью фреймворка.
Фреймворк Bootstrap 5. Быстрый старт
Изучите основы Bootstrap 5 на практическом примере по верстке интернет-магазина с нуля
Фреймворк Bootstrap 5. Быстрый старт
Изучите основы Bootstrap 5 на практическом примере по верстке интернет-магазина с нуля!
В этой статье рассмотрим, как в 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 рис. При нажатии на меню оно выпадает, когда нажимаешь, допустим на ПРОЕКТЫ то подпункты заливаются цветом ссылки и не работают, интересно, что последний пункт КОНТАКТЫ работает как должен, остальные нет. Подскажите где искать, что редактировать?
