Компонент Навигация списком : Nav
Создавайте навигации списком и устанавливайте различные стили для неё. Создание навигации в стиле многоуровнего меню «Аккордеон».
Навигация списком в стиле многоуровнего меню Аккордеон с выпадающими подпунктами.
Руководство
Чтобы использовать компонент Nav, используйте следующие классы.
Класс | Описание |
---|---|
.uk-nav |
Добавьте этот класс к элементу <ul> чтобы определить компонент Nav.Используйте элементы <a> в качестве навигационных пунктов меню. |
.uk-active |
Добавьте этот класс к элементу списка, чтобы установить элементу меню активное состояние. |
<ul class="uk-nav">
<li class="uk-active"><a href=""></a></li>
<li><a href=""></a></li>
</ul>
.uk-nav-default
. подробнее
-
-
<div class="uk-width-1-2@s uk-width-2-5@m"> <ul class="uk-nav uk-nav-default"> <li class="uk-active"><a href="#">Активный пункт</a></li> <li><a href="#">Пункт меню</a></li> <li><a href="#">Пункт меню</a></li> </ul> </div>
Вложенная навигация
Добавьте класс .uk-parent
к элементу, чтобы превратить его в родителя. Добавьте класс .uk-nav-sub
к элементу <ul>
внутри элемента, чтобы создать субнавигацию.
<ul class="uk-nav">
<li class="uk-parent">
<a href=""></a>
<ul class="uk-nav-sub">
<li><a href=""></a></li>
<li>
<a href=""></a>
<ul>...</ul>
</li>
</ul>
</li>
</ul>
-
-
<div class="uk-width-1-2@s uk-width-2-5@m"> <ul class="uk-nav uk-nav-default"> <li class="uk-active"><a href="#">Активный пункт</a></li> <li class="uk-parent"> <a href="#">Родительский</a> <ul class="uk-nav-sub"> <li><a href="#">Подпункт</a></li> <li> <a href="#">Подпункт</a> <ul> <li><a href="#">Подпункт</a></li> <li><a href="#">Подпункт</a></li> </ul> </li> </ul> </li> </ul> </div>
Навигация списком с эффектом «Аккордеон»
По умолчанию дочерние пункты меню всегда видны. Чтобы применить эффект аккордеона, просто добавьте к основному <ul>
атрибут uk-nav
. Для применения значков (иконок, указателей), обозначающих родительские элементы, добавьте класс .uk-nav-parent-icon
.
uk-nav
автоматически устанавливает класс .uk-nav
, поэтому вам не нужно прописывать его вручную.
<ul class="uk-nav-parent-icon" uk-nav>...</ul>
Nav и Accordion
-
-
<div class="uk-width-1-2@s uk-width-2-5@m"> <ul class="uk-nav-default uk-nav-parent-icon" uk-nav> <li class="uk-active"><a href="#">Активный</a></li> <li class="uk-parent"> <a href="#">Родительский пункт</a> <ul class="uk-nav-sub"> <li><a href="#">Подпункт</a></li> <li> <a href="#">Подпункт</a> <ul> <li><a href="#">Ещё подпункт</a></li> <li><a href="#">Ещё подпункт</a></li> </ul> </li> </ul> </li> <li class="uk-parent"> <a href="#">Родительский пункт</a> <ul class="uk-nav-sub"> <li><a href="#">Подпункт</a></li> <li><a href="#">Ещё подпункт</a></li> </ul> </li> </ul> </div>
Несколько открытых подпунктов
При нажатии по родительскому элементу открытый пункт закрывается, позволяя одновременно открывать только один открытый вложенный список. Чтобы изменить такое поведение и разрешить открывать несколько подпунктов сразу, просто добавьте к атрибуту опцию multiple: true
.
<ul class="uk-nav-parent-icon" uk-nav="multiple: true">...</ul>
-
-
<div class="uk-width-1-2@s uk-width-2-3@m uk-width-1-2@l"> <ul class="uk-nav-default uk-nav-parent-icon" uk-nav="multiple: true"> <li class="uk-active"><a href="#">Активный пункт меню</a></li> <li class="uk-parent"> <a href="#">Родительский пункт</a> <ul class="uk-nav-sub"> <li><a href="#">Подпункт</a></li> <li> <a href="#">Подпункт</a> <ul> <li><a href="#">Ещё подпункт</a></li> <li><a href="#">Ещё один подпункт</a></li> </ul> </li> </ul> </li> <li class="uk-parent"> <a href="#">Ещё родительский пункт</a> <ul class="uk-nav-sub"> <li><a href="#">Подпункт меню</a></li> <li><a href="#">Ещё один подпункт</a></li> </ul> </li> </ul> </div>
Заголовок и разделитель
Добавьте один из следующих классов в элемент списка, чтобы создать заголовок или какое-либо название. Также можно добавить разделитель между элементами навигации.
Класс | Описание |
---|---|
.uk-nav-header |
Добавьте этот класс к элементу <li> , чтобы создать заголовок. |
.uk-nav-divider |
Добавьте этот класс к элементу <li> , чтобы создать разделитель, разделяющий элементы навигации. |
<li class="uk-nav-header">Заголовок</li>
<li class="uk-nav-divider"></li> <!-- Разделитель -->
-
- Название раздела
- Пункт меню
- Пункт меню
- Фреймворк UIkit 3
-
<div class="uk-width-1-2@s uk-width-2-5@m"> <ul class="uk-nav uk-nav-default"> <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="https://asuikit.com/v3">Фреймворк UIkit 3</a></li> </ul> </div>
Модификатор «Default»
Добавьте класс .uk-nav-default
, чтобы придать навигации стиль по умолчанию. Вы можете разместить навигацию внутри карточек или в любом другом месте вашего контента.
<ul class="uk-nav uk-nav-default">...</ul>
-
-
<div class="uk-card uk-card-default uk-card-body uk-width-1-2@s"> <ul class="uk-nav-default uk-nav-parent-icon" uk-nav> <li class="uk-active"><a href="#">Активный пункт меню</a></li> <li class="uk-parent"> <a href="#">Родительский пункт меню</a> <ul class="uk-nav-sub"> <li><a href="#">Подпункт меню</a></li> <li><a href="#">Подпункт меню</a></li> </ul> </li> <li class="uk-parent"> <a href="#">Ещё родительский пункт</a> <ul class="uk-nav-sub"> <li><a href="#">Подпункт меню</a></li> <li><a href="#">Подпункт меню</a></li> </ul> </li> <li class="uk-nav-header">Раздел UIkit 3</li> <li><a href="#"><span class="uk-margin-small-right" uk-icon="cog"></span> Инструментарий</a></li> <li><a href="#"><span class="uk-margin-small-right" uk-icon="thumbnails"></span> Коллекция</a></li> <li class="uk-nav-divider"></li> <li><a href="https://asuikit.com/v3"><span class="uk-margin-small-right" uk-icon="uikit"></span> Фреймворк</a></li> </ul> </div>
Модификатор «Primary»
Добавьте класс .uk-nav-primary
, чтобы придать навигации привелекающий стиль, например, при использовании в модальном окне.
<ul class="uk-nav uk-nav-primary">...</ul>
-
-
<div class="uk-width-1-2@s"> <ul class="uk-nav-primary uk-nav-parent-icon" uk-nav> <li class="uk-active"><a href="#">Активный пункт меню</a></li> <li class="uk-parent"> <a href="#">Заголовок пункта меню</a> <ul class="uk-nav-sub"> <li><a href="#">Обычный подпункт меню</a></li> <li><a href="#">Очередной подпункт меню</a></li> </ul> </li> <li class="uk-parent"> <a href="#">Название пункта меню</a> <ul class="uk-nav-sub"> <li><a href="#">Обычный подпункт меню</a></li> <li><a href="#">Очередной подпункт меню</a></li> </ul> </li> <li><a href="#">Невероятное!</a></li> </ul> </div>
Модификатор «Center»
Добавьте класс .uk-nav-center
для внутреннего центрирования элементов навигации. Это можно сочетать со стилями классов-модификаторов Default и Primary.
<ul class="uk-nav uk-nav-default uk-nav-center">...</ul>
-
-
<div class="uk-card uk-card-default uk-card-body uk-width-1-2@s"> <ul class="uk-nav-default uk-nav-center uk-nav-parent-icon" uk-nav> <li class="uk-active"><a href="#">Активный пункт меню</a></li> <li><a href="#">Элемент меню по центру</a></li> <li><a href="#">Центрированный пункт меню</a></li> </ul> </div>
Выпадающий список навигационного меню
Добавьте класс .uk-dropdown-nav
, чтобы разместить навигационное меню внутри выпадающего списка Dropdown по умолчанию.
<div uk-dropdown>
<ul class="uk-nav uk-dropdown-nav">...</ul>
</div>
Nav и Dropdown
-
- Активное меню
- Навигация
- Красивый заголовок
- Навигация
- Элемент навигация
- Отдельный пункт
-
<button class="uk-button uk-button-primary" type="button">Наведи на меня</button> <div 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>
Навигация списком в панели Navbar
Добавьте класс .uk-navbar-dropdown-nav
, чтобы сделать выпадающее навигационное меню внутри горизонтальной панели навигации из компонента Navbar.
<div class="uk-navbar-dropdown">
<ul class="uk-nav uk-navbar-dropdown-nav">...</ul>
</div>
Nav и Navbar
-
-
<nav class="uk-navbar-container" uk-navbar> <div class="uk-navbar-left"> <ul class="uk-navbar-nav"> <li> <a href="#">Родительский пункт</a> <div class="uk-navbar-dropdown"> <ul class="uk-nav uk-navbar-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> </ul> </div> </nav>
Навигация списком и Off-canvas
Навигация списком может использоваться внутри панели off-canvas из компонента Off-canvas. Класс модификатора не нужно добавлять.
Пример Nav и Off-canvas
-
Открыть -
<a href="#offcanvas-slide" class="uk-button uk-button-primary" uk-toggle>Открыть</a> <div id="offcanvas-slide" uk-offcanvas> <div class="uk-offcanvas-bar"> <ul class="uk-nav uk-nav-default"> <li class="uk-active"><a href="#">Активный Off-canvas</a></li> <li><a href="#">Пункт off-canvas</a></li> <li class="uk-nav-header">Крутой заголовок</li> <li><a href="#">Пункт меню off-canvas</a></li> <li><a href="#">Ещё один пункт меню</a></li> <li class="uk-nav-divider"></li> <li><a href="#">Отдельный off-canvas пункт</a></li> </ul> </div> </div>
Опции компонента
При использовании компонента Nav к атрибуту можно применить любой из этих параметров. Разделяйте несколько вариантов точкой с запятой. Для получения дополнительной информации ознакомьтесь с главой Конфигурация компонента.
Опция | Значение | По умолчанию | Описание |
---|---|---|---|
targets |
CSS selector | > .uk-parent |
Элемент (ы) для переключения. |
toggle |
CSS selector | > a |
Элемент (ы) переключения. |
content |
CSS selector | > ul |
Элемент (ы) содержимого. |
collapsible |
Boolean | true |
Разрешить закрытие всех эллементов. |
multiple |
Boolean | false |
Разрешить несколько открытых позиций. |
transition |
String | ease |
Переход. |
animation |
String | true |
Использование анимации. Название анимации через запятую. |
duration |
Number | 200 |
Продолжительность анимации в миллисекундах. |
JavaScript
Узнайте больше о использовании JavaScript в компонентах фреймворка UIkit 3.
Инициализация
UIkit.nav(element, options);
Методы
Для компонента «Nav» доступны следующие методы:
Toggle
UIkit.nav(element).toggle(index, animate);
Переключает область содержимого.
Название | Тип | По умолчанию | Описание |
---|---|---|---|
index |
String, Integer, Node | Навигационная панель для переключения. Индекс начинается с 0. |
|
animate |
Boolean | true | Запретить открытие анимации, передав false. |