Компонент Dropnav
Выпадающее меню. Создание выпадающего меню для любой навигации.
Компонент Dropnav инициализирует все раскрывающиеся списки в навигации с одинаковыми параметрами, поэтому их не нужно инициализировать по отдельности. Все выпадающие списки в раскрывающемся меню ориентированы на цель. Это означает, что раскрывающиеся списки остаются открытыми до тех пор, пока указатель мыши движется к раскрывающемуся списку. Дополнительная задержка гарантирует, что раскрывающиеся списки останутся открытыми, даже если указатель мыши на короткое время переместится в другом направлении. В режиме наведения раскрывающиеся списки закрываются немедленно, если наведен курсор на другой пункт меню.
Применение
Компонент Dropnav состоит из нескольких переключателей и связанных с ними раскрывающихся списков.
Добавьте атрибут uk-dropnav
к элементу списка, который содержит переключатели или в сам родительский элемент-контейнер.
Используя компонент Dropdown, добавим к раскрывающемуся списку класс .uk-dropdown
, а также
классы .uk-nav
и .uk-dropdown-nav
для навигации внутри раскрывающегося списка.
Переключатели Dropnav заранее стилизованы под другие возможные компоненты, некоторые из которых будут показаны ниже.
<ul uk-dropnav>
<li>
<a href=""></a>
<div class="uk-dropdown">
<ul class="uk-nav uk-dropdown-nav">…</ul>
</div>
</li>
</ul>
В этом примере используется компонент горизонтальной навигации Subnav.
Dropbar
Панель раскрывающегося списка dropbar расширяется на всю ширину раскрывающейся навигации и
отображает выпадающий список без стиля по умолчанию.
Чтобы разместить раскрывающиеся списки внутри такой прикольной панели,
добавьте параметр dropbar: true
к атрибуту uk-dropnav
.
При желании используйте параметр dropbar-anchor
, чтобы выбрать,
после какого элемента в разметку будет вставлена панель раскрывающегося списка на всю ширину.
<nav uk-dropnav="dropbar: true">…</nav>
-
-
<div uk-dropnav="dropbar: true"> <ul class="uk-subnav"> <li class="uk-active"> <a href="#">Активный</a> </li> <li> <a href="#">Наведи</a> <div class="uk-dropdown"> <ul class="uk-nav uk-dropdown-nav"> <li class="uk-active"><a href="#">Активность</a></li> <li><a href="#">Пункт</a></li> <li class="uk-nav-header">Название</li> <li><a href="#">Пункт</a></li> <li><a href="#">Пункт</a></li> <li class="uk-nav-divider"></li> <li><a href="#">Пункт</a></li> </ul> </div> </li> <li> <a href="#">Розділ меню</a> <div class="uk-dropdown uk-width-large"> <div class="uk-child-width-1-2" uk-grid> <div> <ul class="uk-nav uk-dropdown-nav"> <li class="uk-active"><a href="#">Активність</a></li> <li><a href="#">Пункт</a></li> <li class="uk-nav-header">Назва</li> <li><a href="#">Пункт</a></li> <li><a href="#">Пункт</a></li> <li class="uk-nav-divider"></li> <li><a href="#">Ще пункт</a></li> </ul> </div> <div> <ul class="uk-nav uk-dropdown-nav"> <li class="uk-active"><a href="#">Активність</a></li> <li><a href="#">Пункт</a></li> <li class="uk-nav-header">Назва</li> <li><a href="#">Пункт</a></li> <li><a href="#">Ще пункт</a></li> <li class="uk-nav-divider"></li> <li><a href="#">Пункт</a></li> </ul> </div> </div> </div> </li> </ul> </div>
Режим «click»
Родительский элемент внутри навигации dropnav можно запустить, наведя курсор или щелкнув переключатель.
Чтобы использовать режим «клик» в выпадающем меню достаточно добавить опцию mode: click
к атрибуту uk-dropnav
.
<nav uk-dropnav="mode: click">…</nav>
-
-
<div uk-dropnav="mode: click"> <ul class="uk-subnav"> <li class="uk-active"><a href="#">Активний</a></li> <li> <a href="#">Батьківський <span uk-drop-parent-icon></span></a> <div class="uk-dropdown"> <ul class="uk-nav uk-dropdown-nav"> <li class="uk-active"><a href="#">Активний</a></li> <li><a href="#">Пункт</a></li> <li><a href="#">Ще пункт</a></li> </ul> </div> </li> <li> <a href="#">Батьківський <span uk-drop-parent-icon></span></a> <div class="uk-dropdown"> <ul class="uk-nav uk-dropdown-nav"> <li class="uk-active"><a href="#">Активний</a></li> <li><a href="#">Пункт</a></li> <li><a href="#">Ще пункт</a></li> </ul> </div> </li> <li><a href="#">Назва</a></li> </ul> </div>
Выравнивание
По умолчанию раскрывающиеся списки (менюшки) расположены под элементом раскрывающейся панели и выровнены по левому краю.
Чтобы изменить выравнивание, установите параметр align
для атрибута uk-dropbar
.
Позиция | Описание |
---|---|
left |
Выравнивает парящие списки по левому краю. |
right |
Выравнивает раскрывающиеся меню по правому краю. |
center |
Выравнивает вываливающиеся списки по центру. |
<nav uk-dropbar="align: center">…</nav>
-
-
<div uk-dropnav="align: center"> <ul class="uk-subnav uk-flex-center"> <li class="uk-active"><a href="#">Активність</a></li> <li> <a href="#">Батьківський <span uk-drop-parent-icon></span></a> <div class="uk-dropdown"> <ul class="uk-nav uk-dropdown-nav"> <li class="uk-active"><a href="#">Активність</a></li> <li><a href="#">Пункт</a></li> <li><a href="#">Ще пункт</a></li> </ul> </div> </li> <li> <a href="#">Батьківський <span uk-drop-parent-icon></span></a> <div class="uk-dropdown"> <ul class="uk-nav uk-dropdown-nav"> <li class="uk-active"><a href="#">Активність</a></li> <li><a href="#">Пункт</a></li> <li><a href="#">Ще пункт</a></li> </ul> </div> </li> <li><a href="#">Пункт</a></li> </ul> </div>
-
-
<nav uk-dropnav="align: right"> <ul class="uk-subnav uk-flex-right"> <li> <a href="#">Компоненты <span uk-drop-parent-icon></span></a> <div class="uk-dropdown"> <ul class="uk-nav uk-dropdown-nav"> <li><a href="/v3/flex">Flex</a></li> <li><a href="/v3/subnav">Subnav</a></li> </ul> </div> </li> </ul> </nav>
Target
По умолчанию выпадающие дропдаун-списки выровнены по своему элементу переключения.
Чтобы поместить чудо-список навигации в другой элемент, просто добавьте опцию target: SELECTOR
к атрибуту uk-dropbar
.
<nav uk-dropbar="target: !.uk-section">…</nav>
-
-
<div class="uk-section uk-section-muted uk-section-small"> <nav uk-dropnav="target: !.uk-section; align: center"> <ul class="uk-subnav"> <li class="uk-active"><a href="#">Активный</a></li> <li> <a href="#">Родительский</a> <div class="uk-dropdown"> <ul class="uk-nav uk-dropdown-nav"> <li class="uk-active"><a href="#">Активный</a></li> <li><a href="#">Пункт</a></li> <li class="uk-nav-header">Раздел</li> <li><a href="#">Пункт</a></li> <li><a href="#">Пункт</a></li> <li class="uk-nav-divider"></li> <li><a href="#">Пункт</a></li> </ul> </div> </li> <li> <a href="#">Родительский</a> <div class="uk-dropdown uk-width-large"> <div class="uk-child-width-1-2" uk-grid> <div> <ul class="uk-nav uk-dropdown-nav"> <li class="uk-active"><a href="#">Активный</a></li> <li><a href="#">Пункт</a></li> <li class="uk-nav-header">Раздел</li> <li><a href="#">Пункт</a></li> <li><a href="#">Пункт</a></li> <li class="uk-nav-divider"></li> <li><a href="#">Пункт</a></li> </ul> </div> <div> <ul class="uk-nav uk-dropdown-nav"> <li class="uk-active"><a href="#">Активный</a></li> <li><a href="#">Пункт</a></li> <li class="uk-nav-header">Раздел</li> <li><a href="#">Пункт</a></li> <li><a href="#">Пункт</a></li> <li class="uk-nav-divider"></li> <li><a href="#">Пункт</a></li> </ul> </div> </div> </div> </li> </ul> </nav> </div>
Stretch
Чтобы растянуть горизонтальный выпадающий список (меню), используйте компонент Drop и его параметр stretch
.
В следующем примере выпадающий список с навигационным содержимым полностью выравнивается (растягивается) по границе раскрывающегося меню при открытии.
<nav uk-dropnav="boundary: true; stretch: x; flip: false">…</nav>
-
-
<nav uk-dropnav="boundary: true; stretch: x; flip: false"> <ul class="uk-subnav"> <li class="uk-active"><a href="#">Активный</a></li> <li> <a href="#">Родительский</a> <div class="uk-dropdown"> <ul class="uk-nav uk-dropdown-nav"> <li class="uk-active"><a href="#">Активный</a></li> <li><a href="#">Пункт</a></li> <li class="uk-nav-header">Раздел</li> <li><a href="#">Пункт</a></li> <li><a href="#">Пункт</a></li> <li class="uk-nav-divider"></li> <li><a href="#">Пункт</a></li> </ul> </div> </li> <li> <a href="#">Родительский</a> <div class="uk-dropdown"> <div class="uk-child-width-1-2" uk-grid> <div> <ul class="uk-nav uk-dropdown-nav"> <li class="uk-active"><a href="#">Активный</a></li> <li><a href="#">Пункт</a></li> <li class="uk-nav-header">Раздел</li> <li><a href="#">Пункт</a></li> <li><a href="#">Пункт</a></li> <li class="uk-nav-divider"></li> <li><a href="#">Пункт</a></li> </ul> </div> <div> <ul class="uk-nav uk-dropdown-nav"> <li class="uk-active"><a href="#">Активный</a></li> <li><a href="#">Пункт</a></li> <li class="uk-nav-header">Раздел</li> <li><a href="#">Пункт</a></li> <li><a href="#">Пункт</a></li> <li class="uk-nav-divider"></li> <li><a href="#">Пункт</a></li> </ul> </div> </div> </div> </li> </ul> </nav>
Родительская иконка
Чтобы создать родительский значок-иконку, просто используйте компонент Drop и
добавьте атрибут uk-drop-parent-icon
к элементу <span>
.
<ul uk-dropnav>
<li>
<a href="">Родительский <span uk-drop-parent-icon></span></a>
<div class="uk-dropdown">…</div>
</li>
</ul>
-
-
<nav uk-dropnav> <ul class="uk-subnav"> <li class="uk-active"><a href="#">Активный</a></li> <li> <a href="#">Родительский <span uk-drop-parent-icon></span></a> <div class="uk-dropdown"> <ul class="uk-nav uk-dropdown-nav"> <li class="uk-active"><a href="#">Активный</a></li> <li><a href="#">Пункт</a></li> <li><a href="#">Пункт</a></li> </ul> </div> </li> <li> <a href="#">Родительский <span uk-drop-parent-icon></span></a> <div class="uk-dropdown"> <ul class="uk-nav uk-dropdown-nav"> <li class="uk-active"><a href="#">Активный</a></li> <li><a href="#">Пункт</a></li> <li><a href="#">Пункт</a></li> </ul> </div> </li> <li><a href="#">Пункт</a></li> </ul> </nav>
Dropnav и Tab
Dropnav легко применяется к компоненту отзывчивых кликабельных вкладок Tab .
<nav uk-dropnav>
<ul class="uk-tab">…</ul>
<nav>
-
-
<nav uk-dropnav> <ul class="uk-tab"> <li class="uk-active"><a href="#">Активный</a></li> <li> <a href="#">Родительский <span uk-drop-parent-icon></span></a> <div class="uk-dropdown"> <ul class="uk-nav uk-dropdown-nav"> <li class="uk-active"><a href="#">Активный</a></li> <li><a href="#">Пункт</a></li> <li><a href="#">Пункт</a></li> </ul> </div> </li> <li> <a href="#">Родительский <span uk-drop-parent-icon></span></a> <div class="uk-dropdown"> <ul class="uk-nav uk-dropdown-nav"> <li class="uk-active"><a href="#">Активный</a></li> <li><a href="#">Пункт</a></li> <li><a href="#">Пункт</a></li> </ul> </div> </li> <li><a href="#">Пункт</a></li> </ul> </nav>
JavaScript
Узнайте больше о использовании JavaScript в компонентах фреймворка UIkit 3.
Инициализация
UIkit.dropnav(element, options);
События
На элементах, к которым прикреплен этот компонент, будут срабатывать следующие события:
Имя события | Описание |
---|---|
beforeshow |
Срабатывает до отображения элемента. Можно предотвратить отображение, вызвав событие preventDefault() .
|
show |
Срабатывает после показа элемента. |
shown |
Срабатывает после завершения анимации показанного элемента. |
beforehide |
Срабатывает до того, как элемент будет скрыт. Можно предотвратить скрытие, вызвав событие preventDefault() .
|
hide |
Срабатывает после того, как началась анимация скрытия элемента. |
hidden |
Срабатывает после того, как элемент скрыт. |
Доступность
Компонент Dropnav придерживается Disclosure Navigation Menu и автоматически устанавливает соответствующие роли, состояния и свойства WAI-ARIA.
-
Элементы навигации и элементы переключения имеют
aria-expanded
состояние иaria-haspopup
свойство. - Переключаемые элементы также имеют
aria-label
свойство.
Взаимодействие с клавиатурой
Доступ к компоненту Dropnav можно получить с клавиатуры, используя следующие клавиши:
- Клавиши tab или shift+tab размещают фокус внутри или снаружи навигационной панели.
- Клавиши left/right arrow перемещаются по элементам dropnav. В режиме наведения раскрывающийся список откроется автоматически. Если фокус находится на последнем элементе, он перемещается на первый элемент.
- Клавиши enter или space открывают и закрывают раскрывающийся список выделенного элемента раскрывающейся навигации.
- Клавиши up/down arrow перемещаются по элементам навигации в раскрывающемся списке. Если фокус находится на последнем элементе, он перемещается на первый элемент.
- Клавиша esc закрывает любой раскрывающийся список, даже если фокус переместился на другой элемент.
Интернационализация
Использование компонентом строк перевода. Подробнее о переводе компонентов.
Ключ | По умолчанию | Описание |
---|---|---|
label |
Open Menu |
aria-label атрибут. |
Подробнее о переводе компонентов.