Компонент Навигация списком
Создавайте навигации списком и устанавливайте различные стили для неё. Создание навигации в стиле многоуровнего меню «Аккордеон».
Навигация списком в стиле многоуровнего меню Аккордеон с выпадающими подпунктами.
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
.
подробнее
Вложенная навигация
Добавьте класс .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
автоматически устанавливает класс .uk-nav
,
поэтому вам не нужно прописывать его вручную.
<ul uk-nav>...</ul>
Для применения значков (иконок, указателей), обозначающих родительские элементы,
добавьте атрибут uk-nav-parent-icon
к элементу <span>
.
<ul uk-nav>
<li>
<a href="">Родитель <span uk-nav-parent-icon></span></a>
…
</li>
</ul>
<div class="uk-child-width-1-2@m" uk-grid>
<div>
<ul class="uk-nav-default" 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>
<div>
<ul class="uk-nav-default" uk-nav>
<li class="uk-active"><a href="#">Активный</a></li>
<li class="uk-parent">
<a href="#">Родительский пункт<span uk-nav-parent-icon></span></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="#">Родительский пункт<span uk-nav-parent-icon></span></a>
<ul class="uk-nav-sub">
<li><a href="#">Подпункт</a></li>
<li><a href="#">Ещё подпункт</a></li>
</ul>
</li>
</ul>
</div>
</div>
Множественное открытие
Несколько открытых подпунктов
При нажатии по родительскому элементу открытый пункт закрывается, позволяя одновременно открывать только один открытый вложенный список.
Чтобы изменить такое поведение и разрешить открывать несколько подпунктов сразу,
просто добавьте к атрибуту опцию multiple: true
.
<ul 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="multiple: true">
<li class="uk-active"><a href="#">Активный пункт меню</a></li>
<li class="uk-parent">
<a href="#">Родительский пункт<span uk-nav-parent-icon></span></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="#">Ещё родительский пункт<span uk-nav-parent-icon></span></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-subtitle |
При использовании подзаголовка в заголовке добавьте этот класс к элементу div . |
.uk-nav-divider |
Добавьте этот класс к элементу <li> , чтобы создать разделитель, разделяющий элементы навигации. |
<li class="uk-nav-header">Заголовок</li>
<li class="uk-nav-divider"></li> <!-- Разделитель -->
<li class="uk-nav-header">
Заголовок
<div class="uk-nav-subtitle">Подзаголовок</div>
</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">
Название раздела
<div class="uk-nav-subtitle">Подзаголовок</div>
</li>
<li class="uk-nav-divider"></li>
<li><a href="#">Пункт меню</a></li>
<li><a href="#">Пункт меню</a></li>
<li><a href="#">Пункт меню</a></li>
<li><a href="#">Пункт меню</a></li>
<li class="uk-nav-divider"></li>
<li><a href="">Фреймворк UIkit 3</a></li>
</ul>
</div>
Подзаголовок
Добавьте класс .uk-nav-subtitle
к элементу div
, чтобы создать элемент с субтитрами.
<ul class="uk-nav">
<li>
<a href="">
<div>
Что-то
<div class="uk-nav-subtitle">
Это не было сном. Его комната, настоящая.
</div>
</div>
</a>
</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="#">
<div>
Активный
<div class="uk-nav-subtitle">
Когда от милой моей долины поднимается пар и полдневное солнце стоит.
</div>
</div>
</a>
</li>
<li><a href="#"><div>Название<div class="uk-nav-subtitle">Душа моя озарена неземной радостью, я наслаждаюсь от всего сердца.</div></div></a></li>
<li><a href="#"><div>Название<div class="uk-nav-subtitle">Душа моя озарена неземной радостью, я наслаждаюсь от всего сердца.</div></div></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>
<li class="uk-active"><a href="#">Активный пункт меню</a></li>
<li class="uk-parent">
<a href="#">Родительский пункт меню<span uk-nav-parent-icon></span></a>
<ul class="uk-nav-sub">
<li><a href="#">Подпункт меню</a></li>
<li><a href="#">Подпункт меню</a></li>
</ul>
</li>
<li class="uk-parent">
<a href="#">Ещё родительский пункт<span uk-nav-parent-icon></span></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=""><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>
<li class="uk-active"><a href="#">Активный пункт меню</a></li>
<li class="uk-parent">
<a href="#">Заголовок пункта меню<span uk-nav-parent-icon></span></a>
<ul class="uk-nav-sub">
<li><a href="#">Обычный подпункт меню</a></li>
<li><a href="#">Очередной подпункт меню</a></li>
</ul>
</li>
<li class="uk-parent">
<a href="#">Название пункта меню<span uk-nav-parent-icon></span></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>
Модификатор «Secondary»
Добавьте класс .uk-nav-secondary
, чтобы использовать дополнительный стиль, если у навигации есть Подзаголовок.
<ul class="uk-nav uk-nav-secondary">…</ul>
<div class="uk-width-1-2@s">
<ul class="uk-nav uk-nav-secondary">
<li class="uk-active"><a href="#"><div>Активный<div class="uk-nav-subtitle">Когда от милой моей долины поднимается пар и полдневное солнце стоит.</div></div></a></li>
<li><a href="#"><div>Название<div class="uk-nav-subtitle">Душа моя озарена неземной радостью, я наслаждаюсь от всего сердца.</div></div></a></li>
<li>
<a href="#">
<div>
Название
<div class="uk-nav-subtitle">
Душа моя озарена неземной радостью, я наслаждаюсь от всего сердца.
</div>
</div>
</a>
</li>
</ul>
</div>
Модификатор «Center»
Добавьте класс .uk-nav-center
для внутреннего центрирования элементов навигации.
Это можно сочетать со стилями классов-модификаторов
Default,
Primary и
Secondary.
<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>
<li class="uk-active"><a href="#">Активный пункт меню</a></li>
<li><a href="#">Элемент меню по центру</a></li>
<li><a href="#">Центрированный пункт меню</a></li>
</ul>
</div>
Модификатор «Divider»
Между пунктами вертикального меню можно добавить разделительные линии.
Добавьте класс .uk-nav-divider
, чтобы разделить элементы адаптивной навигации линиями.
Его можно комбинировать с модификаторами
Default,
Primary и
Secondary.
<ul class="uk-nav uk-nav-default uk-nav-divider">...</ul>
<div class="uk-width-1-2@s">
<ul class="uk-nav-default uk-nav-divider" uk-nav>
<li class="uk-active"><a href="#">Активный пункт</a></li>
<li><a href="#">Элемент меню</a></li>
<li><a href="#">Элемент меню</a></li>
</ul>
</div>
Модификатор «Размер»
Добавьте один из следующих классов, чтобы изменить размер основной навигации.
Класс | Описание |
---|---|
.uk-nav-medium |
Основная навигация среднего размера. |
.uk-nav-large |
Основная навигация большого размера. |
.uk-nav-xlarge |
Основная навигация размера xlarge. |
<ul class="uk-nav uk-nav-primary uk-nav-large">…</ul>
Nav и Dropdown
Выпадающий список навигационного меню
Добавьте класс .uk-dropdown-nav
, чтобы разместить навигационное меню внутри выпадающего списка Dropdown по умолчанию.
<div uk-dropdown>
<ul class="uk-nav uk-dropdown-nav">...</ul>
</div>
- Активное меню
- Навигация
- Красивый заголовок
- Навигация
- Элемент навигация
- Отдельный пункт
<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>
Nav и Navbar
Навигация списком в панели Navbar
Добавьте класс .uk-navbar-dropdown-nav
, чтобы сделать выпадающее навигационное меню внутри горизонтальной панели навигации из компонента Navbar.
<div class="uk-navbar-dropdown">
<ul class="uk-nav uk-navbar-dropdown-nav">...</ul>
</div>
<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>
Nav и Offcanvas
Навигация списком и Offcanvas
Навигация списком может использоваться внутри панели off-canvas из компонента Offcanvas. Класс модификатора не нужно добавлять.
<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 |
Boolean, String | true |
Использование анимации. Название анимации через запятую. |
duration |
Number | 200 |
Продолжительность анимации в миллисекундах. |
JavaScript
Узнайте больше о использовании JavaScript в компонентах фреймворка UIkit 3.
Инициализация
UIkit.nav(element, options);
Методы
Для компонента «Nav» доступны следующие методы:
Toggle
UIkit.nav(element).toggle(index, animate);
Переключает область содержимого.
Название | Тип | По умолчанию | Описание |
---|---|---|---|
index |
String, Number, Node | 0 | Навигационная панель для переключения. Индекс начинается с 0. |
animate |
Boolean | true | Запретить открытие анимации, передав false. |