Примечание
По умолчанию навигация не имеет стиля. Вот почему важно добавить класс-модификатор.
В данном примере используется класс .uk-nav-default.
подробнее
Вложенная навигация
Добавьте класс .uk-parent к элементу, чтобы превратить его в родителя. Добавьте класс .uk-nav-sub к элементу <ul> внутри элемента, чтобы создать субнавигацию.
При нажатии по родительскому элементу открытый пункт закрывается, позволяя одновременно открывать только один открытый вложенный список.
Чтобы изменить такое поведение и разрешить открывать несколько подпунктов сразу,
просто добавьте к атрибуту опцию multiple: true.
Добавьте один из следующих классов в элемент списка, чтобы создать заголовок или какое-либо название. Также можно добавить разделитель между элементами навигации.
Класс
Описание
.uk-nav-header
Добавьте этот класс к элементу <li>, чтобы создать заголовок.
.uk-nav-subtitle
При использовании подзаголовка в заголовке добавьте этот класс к элементу div.
.uk-nav-divider
Добавьте этот класс к элементу <li>, чтобы создать разделитель, разделяющий элементы навигации.
Добавьте класс .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, чтобы придать навигации стиль по умолчанию. Вы можете разместить навигацию внутри карточек или в любом другом месте вашего контента.
<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.
<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.
При использовании компонента 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.