Компонент 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. 

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

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>

Параметры для атрибута

При использовании компонента Dropnav к атрибуту можно применить любой из этих параметров. Разделяйте несколько вариантов точкой с запятой. Для получения дополнительной информации ознакомьтесь с главой Конфигурация компонента.

Опция Значение По умолчанию Описание
align String left Выравнивание раскрывающейся панели: left, right, center
dropbar Boolean false Включить или отключить поведение dropbar.
dropbar-anchor CSS selector false Если установлено, панель dropbar будет вставлена после anchor элемента.
stretch Boolean, x, y true Растянуть раскрывающийся список по обеим (true) или заданным осям.
mode click, hover click, hover Разделенный запятыми список режимов.
delay-show Number 0 Время задержки в режиме наведения перед отображением раскрывающегося списка в мс.
delay-hide Number 800 Время задержки в режиме наведения перед тем, как раскрывающийся список будет скрыт в мс.
boundary CSS selector true Область, которую раскрывающийся список не может превышать, заставляя его переворачиваться и сдвигаться.
По умолчанию ближайший предок прокрутки.
target Boolean, CSS selector false Элемент, к которому расположен раскрывающийся список (true для window).
target-x Boolean, CSS selector false Ось X элемента, на которой расположен раскрывающийся список (true для window).
target-y Boolean, CSS selector false Ось Y элемента, на которую расположен раскрывающийся список (true для window).
offset Number 0 Смещение раскрывающегося списка.
animation String uk-animation-fade Имена анимаций, разделенные пробелами.
Через запятую для анимации.
animate-out Boolean false Используйте анимацию при закрытии капли.
duration Number 200 Продолжительность анимации.
container Boolean false Определите целевой контейнер с помощью селектора, чтобы указать, где раскрывающийся список должен быть добавлен в DOM.

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

Интернационализация

Использование компонентом строк перевода. Подробнее о переводе компонентов.

Использование Toggle компонентом строк перевода:
Ключ По умолчанию Описание
label Open Menu aria-label атрибут.

Подробнее о переводе компонентов.