bootstrap многоуровневое выпадающее меню

Компоненты

Более десятка повторно используемых компонентов построены так, чтобы обеспечить кнопки, выпадающие меню, группы ввода, навигации, оповещения, и многое другое.

Выпадающие меню

Раскрывающиеся списки переключаемой, контекстная накладки для отображения списков ссылок и более. Они сделаны интерактивными с включенным Bootstrap выпадающего JavaScript плагин. Они переключаются нажатием, не парит; это преднамеренное дизайнерское решение.

Содержание

Примеры

Одиночная кнопка выпадающего меню

Самое приятное, что вы можете сделать это с любым вариантом кнопки:

Split кнопка с выпадающим меню

Изменение размера

Кнопка меню работы с кнопками всех размеров, в том числе по умолчанию и секущихся выпадающих кнопок.

Вариант списка сверху

Пункты меню

Исторически выпадающем меню had чтобы быть одной, но это уже не в случае с v4. Теперь при необходимости можно использовать элементы в раскрывающихся списках, а не просто ы.

Выравнивание меню

Внимание! меню расположены только с CSS и может потребоваться некоторые дополнительные стили для точного выравнивания.

Заголовки меню

Добавьте заголовок чтобы маркировать участки в любом выпадающего меню.

Dropdown header

Делители меню

Отдельные группы связанных элементов меню с делителем.

Заблокированы части меню

Использование

Примечание: data-toggle=»dropdown» атрибут является основанием для закрытия выпадающего меню на уровне приложения, так что это хорошая идея, чтобы всегда использовать его.

С помощью данных атрибутов

Добавить data-toggle=»dropdown» на ссылку или кнопку для переключения в меню.

Через JavaScript

Вызвать меню через JavaScript:

data-toggle=»dropdown» еще требуется

Независимо от того, вызываете ли вы свой выпадающий список через JavaScript или вместо этого используете data-api, data-toggle=»dropdown» всегда должно присутствовать на спусковом элементе раскрывающегося меню.

Варианты

Методы

События

Спроектированы и построены со всей любовью в мире @mdo и @fat. Поддерживается основной командой с помощью наших спонсоров.

Сейчас v4.0.0-alpha.4. Код лицензии MIT, документы CC BY 3.0.

Источник

Выпадающие списки

Переключайте контекстные наложения для отображения списков ссылок и многого другого с помощью плагина раскрывающегося списка Bootstrap.

Обзор

Доступность

Примеры

Одна кнопка

Самое приятное то, что Вы можете сделать это и с любым вариантом кнопки:

Раздельная кнопка

Размеры

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

Направления

Выпадающий вверх

Выпад вправо

Выпадающий влево

Пункты меню

Активный

Отключенный

Выравнивание меню

Адаптивное выравнивание

Если Вы хотите использовать адаптивное выравнивание, отключите динамическое позиционирование, добавив атрибут data-display=»static» и используйте гибкие классы вариантов.

Обратите внимание, что Вам не нужно добавлять атрибут data-display=»static» к кнопкам раскрывающегося списка на панели навигации, поскольку Popper не используется в панелях навигации.

Содержание меню

Заголовки

Добавьте заголовок для обозначения разделов действий в любом раскрывающемся меню.

Заголовок раскрывающегося списка

Разделители

Разделите группы связанных пунктов меню разделителем.

Текст

Поместите произвольный текст в раскрывающееся меню с текстом и используйте утилиты отступа. Обратите внимание, что Вам, вероятно, потребуются дополнительные стили размеров, чтобы ограничить ширину меню.

Пример текста, который свободно перемещается в раскрывающемся меню.

И это еще один пример текста.

Формы

Поместите форму в раскрывающееся меню или превратите ее в раскрывающееся меню и используйте утилиты полей или отступов, чтобы дать ей необходимое отрицательное пространство.

Параметры раскрывающегося списка

Применение

Через атрибуты данных

Добавьте data-toggle=»dropdown» к ссылке или кнопке, чтобы переключить раскрывающийся список.

Через JavaScript

Вызов выпадающих списков через JavaScript:

data-toggle=»dropdown» все еще требуется

Параметры

Смещение раскрывающегося списка относительно его цели.

Когда функция используется для определения смещения, она вызывается с объектом, содержащим данные смещения в качестве первого аргумента. Функция должна возвращать объект с такой же структурой. Узел DOM запускающего элемента передается как второй аргумент.

Дополнительную информацию смотрите в документации Popper по смещению.

Источник

Создаем собственное многоуровневое меню на bootstrap 3, на примере горизонтальной навигационной панели

Доброго времени суток, гости блога и дорогие подписчики. В текущей публикации мы разберем, как создается в Bootstrap многоуровневое меню.

Я расскажу, каким образом можно реализовать вертикальную и горизонтальную навигационную панель с подменю на Bootstrap 3, что такое акцентирующие панели и для чего они нужны, а также покажу запрограммированные мною примеры. Ну что ж, поехали!

Начнем с горизонтального меню

Среди всех существующих веб-сайтов наиболее часто можно встретить горизонтальную навигацию. Сразу же отвечу на ваш вопрос: «Почему именно горизонтальная?». Для этого есть несколько вполне оправданных причин:

Чтобы создать многоуровневый список, необходимо знать, как работают Dropdowns, а также Navigation Bar.

Итак, для начала создадим каркас для будущей навигационной панели. Для этого в коде прописываем тег меню и указываем в нем такие классы, как .navbar и .navbar- inverse. Можно также создать фиксированное меню при помощи классов .navbar-fixed-top и .navbar-fixed-bottom. После, как и обычно, объявляем контейнер, который будет растягиваться на всю ширину экрана и подстраиваться под размер последнего.

Вот теперь для удобства давайте реализуем «Гамбургер меню», чтобы при уменьшении разрешения экрана панель становилась компактной. Для этого необходимо создать триггер в виде кнопки и задать ему имя, по которому после будет происходить связь между кнопкой и перечнем пунктов. Выглядит такой финт следующим образом:

А теперь пришло время верстать сами пункты меню. Изначально необходимо объявить отдельный блок с идентификатором равным «myNavigationBar». А после внутри него реализовать обычный список.

Код этой части программы следует писать следующим образом:

Источник

Выпадающие элементы

Переключайте контекстные оверлеи для отображения списков ссылок и многого другого с помощью плагина раскрывающегося списка Bootstrap.

Обзор

Доступность

Стандарт WAI ARIA описывает и определяет виджет role=»menu» как настоящий виджет, но лишь для меню «а-ля приложение», запускающих действия или функции. Меню ARIA могут содержать лишь пункты меню, чекбоксы, «радио-кнопки», группы «радио-кнопок» и подменю.

Примеры

Выпадающие элементы одинарных кнопок

Самое приятное то, что Вы можете сделать это и с любым вариантом кнопки:

Выпадающие элементы кнопок с разделенными зонами

Размеры

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

Темные выпадающие списки

И использовать его в навигационной панели:

Направления

«Выпадающий вверх»

«Выпадающий вправо»

«Выпадающий влево»

Пункты меню

Активные элементы меню

Неактивные элементы меню

Выравнивание меню

Отзывчивое выравнивание

Обратите внимание, что вам не нужно добавлять атрибут data-bs-display=»static» к выпадающим кнопкам на панелях навигации, поскольку Popper.js не используется на панелях навигации.

Варианты выравнивания

Можете воспользоваться примерами с различными вариантами выравнивания раскрывающегося списка.

Содержание меню

Заголовки меню

Добавьте заголовок, чтобы обозначить секции действий любого выпадающего меню.

Dropdown header

Разделители меню

Разделяйте группы родственных элементов меню разделителем.

Текст

Размещайте любой текст внутри выпадающего меню с текстом, используя утилиты отступа. Заметьте, что вам понадобится дополнительная настройка размеров для ограничения ширины меню.

Some example text that’s free-flowing within the dropdown menu.

And this is more example text.

Формы

Расположите форму внутри выпадающего меню, и используйте утилиты отступа для ее уплотнения.

Параметры раскрывающегося списка

Поведение автоматического закрытия

Переменные

Переменные для всех выпадающих списков:

Переменные для курсоров на основе CSS, которые указывают на интерактивность раскрывающегося списка:

Миксины

Использование

Через атрибуты

Добавьте к ссылке или кнопке атрибут data-bs-toggle=»dropdown» для скрытия\показа выпадающего элемента.

Через JavaScript

Управляйте выпадающими элементами с помощью JavaScript:

data-bs-toggle=»dropdown» все еще требуется

Независимо от того, управляете вы выпадающим элементом через 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.

Источник

Выпадающие списки

Переключайте контекстные наложения для отображения списков ссылок и многого другого с помощью плагина выпадающего списка 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

Методы

События

Все выпадающие события запускаются в переключающемся элементе, а затем всплывают. Таким образом, Вы также можете добавить прослушивателей событий в родительский элемент. hide.bs.dropdown и hidden.bs.dropdown имеют свойство clickEvent (только если исходный тип события click ), который содержит объект события для события клика.

Источник