Компонент Панель навигации
Создайте панель навигации, которую можно использовать для навигации по основному сайту. Создание, примеры, разметка.
Navbar: Руководство
Панель Navbar
Компонент Navbar состоит из контейнера навигационной панели, самой навигационной панели и одной или нескольких навигаций.
| Элемент | Описание |
|---|---|
uk-navbar |
Добавьте этот атрибут к элементу <nav>, чтобы определить компонент Navbar. |
.uk-navbar-container |
Добавьте этот класс к тому же элементу <nav> или родительскому элементу, чтобы добавить стиль фона панели навигации. |
.uk-navbar-left.uk-navbar-center.uk-navbar-right |
Добавьте один из этих классов к элементу <div>, чтобы выровнять навигацию. |
.uk-navbar-nav |
Добавьте этот класс к элементу <ul> для создания навигации.Используйте элементы <a> в качестве пунктов меню в списке. |
.uk-parent |
Добавьте этот класс, чтобы указать родительский пункт меню. |
.uk-active |
Добавьте этот класс, чтобы указать активный пункт меню. |
<nav class="uk-navbar-container" uk-navbar>
<div class="uk-navbar-left">
<ul class="uk-navbar-nav">
<li class="uk-active"><a href=""></a></li>
<li class="uk-parent"><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</div>
</nav>
<nav class="uk-navbar-container" uk-navbar>
<div class="uk-navbar-left">
<ul class="uk-navbar-nav">
<li class="uk-active uk-visible@m"><a href="#">Активный пункт</a></li>
<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><a href="#">Ещё один пункт</a></li>
</ul>
</div>
</li>
<li><a href="#">Название</a></li>
</ul>
</div>
</nav>Ни сама навигационная панель Navbar, ни контейнер навигационной панели не имеют горизонтального отступа. Чтобы установить горизонтальный отступ, как и для остальной части веб-страницы, используйте компонент Container.
<nav class="uk-navbar-container">
<div class="uk-container">
<div uk-navbar>…</div>
</div>
</nav>
<nav class="uk-navbar-container">
<div class="uk-container">
<div uk-navbar>
<div class="uk-navbar-left">
<ul class="uk-navbar-nav">
<li class="uk-active"><a href="#">Активность</a></li>
<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><a href="#">Ещё пункт</a></li>
</ul>
</div>
</li>
<li><a href="#">Карниз</a></li>
</ul>
</div>
</div>
</div>
</nav>Несколько меню
Несколько меню в панели навигации Navbar
Вы можете разместить более одной навигации внутри navbar-контейнера. Таким образом, вы можете иметь выровненную по левому краю, центрированную и выровненную по правому краю навигацию внутри одной и той же панели навигации Navbar.
<nav class="uk-navbar-container" uk-navbar>
<div class="uk-navbar-left">...</div>
<div class="uk-navbar-center">...</div>
<div class="uk-navbar-right">...</div>
</nav>
<nav class="uk-navbar-container">
<div class="uk-container">
<div uk-navbar>
<div class="uk-navbar-left">
<ul class="uk-navbar-nav">
<li class="uk-active"><a href="#">Активный</a></li>
<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><a href="#">Ещё одно название</a></li>
</ul>
</div>
</li>
<li><a href="#">Пункт</a></li>
</ul>
</div>
<div class="uk-navbar-center uk-visible@l">
<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><a href="#">Ещё один пункт</a></li>
<li class="uk-nav-divider"></li>
<li>
<a href="https://asuikit.com/v3">
<span uk-icon="uikit"></span> Фреймворк Uikit 3
</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
<div class="uk-navbar-right uk-visible@m">
<ul class="uk-navbar-nav">
<li class="uk-active"><a href="#">Активный</a></li>
<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><a href="#">Ещё название</a></li>
</ul>
</div>
</li>
<li><a href="#">Пункт</a></li>
</ul>
</div>
</div><!-- // uk-navbar -->
</div><!-- // .uk-container -->
</nav>Модификатор «Transparent»
При использовании изображения или цветного фона
для раздела «Hero» на вашем сайте, может потребоваться сделать прозрачную панель навигации.
Просто добавьте к элементу <nav> класс .uk-navbar-transparent.
.uk-light или .uk-dark из компонента Инверсия,
чтобы настроить соответствующие стили для панели навигации.
<nav class="uk-navbar-container uk-navbar-transparent" uk-navbar>...</nav>
<div class="uk-position-relative">
<img src="images/light.webp" width="1800" height="1200" alt="Светлое изображение" loading="lazy">
<div class="uk-position-top">
<nav class="uk-navbar-container uk-navbar-transparent">
<div class="uk-container">
<div uk-navbar>
<div class="uk-navbar-left">
<ul class="uk-navbar-nav">
<li class="uk-active"><a href="#">Активно</a></li>
<li><a href="#">Пункт</a></li>
<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>
</div>
</div>
</nav>
</div>
</div>Подзаголовок в меню
Чтобы определить подзаголовок (субтитр) в меню, создайте элемент <div> внутри элемента <a>. Добавьте класс .uk-navbar-subtitle к другому элементу <div>.
<li>
<a href="">
<div>
Название...
<div class="uk-navbar-subtitle"></div>
</div>
</a>
</li>
<nav class="uk-navbar-container" uk-navbar>
<div class="uk-navbar-left">
<ul class="uk-navbar-nav">
<li class="uk-active">
<a href="#">
<div>
Активный
<div class="uk-navbar-subtitle">Подзаголовок</div>
</div>
</a>
</li>
<li>
<a href="#">
<div>
Родитель
<div class="uk-navbar-subtitle">субтитр</div>
</div>
</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><a href="#">Великолепное ули</a></li>
</ul>
</div>
</li>
<li class="uk-visible@m">
<a href="#">
<div>
Обычный пункт
<div class="uk-navbar-subtitle">Подзаголовок</div>
</div>
</a>
</li>
</ul>
</div>
</nav>Пользовательский контент
Вы также можете добавить пользовательский контент в панель навигации, например текст, иконки, кнопки или формы.
Добавьте класс .uk-navbar-item к элементу <div>, который служит контейнером для вашего контента.
<div class="uk-navbar-container" uk-navbar>
<div class="uk-navbar-left">
<a href="" class="uk-navbar-item uk-logo"></a> <!-- Отдельный контейнер с лого -->
<ul class="uk-navbar-nav">...</ul>
<div class="uk-navbar-item">...</div> <!-- Отдельный контейнер -->
</div>
</div>
Добавьте класс .uk-logo из компонента полезных дополнительных классов UIkit в элемент <a> или <div>, чтобы обозначить логотип.
<nav class="uk-navbar-container">
<div class="uk-container">
<div uk-navbar>
<div class="uk-navbar-left">
<a class="uk-navbar-item uk-logo" href="/" aria-label="На главную">Лого</a>
<ul class="uk-navbar-nav"> <!-- Навигация, ссылки -->
<li>
<a href="#">
<span class="uk-icon uk-margin-small-right" uk-icon="icon: star"></span>
Цель
</a>
</li>
</ul>
<div class="uk-navbar-item"> <!-- Отдельный контейнер -->
<div>Какая-то <a href="#">ссылка</a></div>
</div>
<div class="uk-navbar-item uk-visible@l"> <!-- Отдельный контейнер -->
<form action="javascript:void(0)">
<input class="uk-input uk-form-width-small" type="text" placeholder="Input">
<button class="uk-button uk-button-default">Кнопка</button>
</form>
</div>
</div>
</div>
</div>
</nav>Центрированный логотип
Вы можете создать разделенное меню с центрированным логотипом.
Просто добавьте класс uk-navbar-center-left в одну панель навигации и класс uk-navbar-center-right в другую
в том же контейнере панели navbar. Таким образом ваш логотип будет по центру, а меню будет выровнено слева и справа.
<div class="uk-navbar-container" uk-navbar>
<div class="uk-navbar-center">
<div class="uk-navbar-center-left">...</div>
<a href="" class="uk-navbar-item uk-logo">ЛОГО</a>
<div class="uk-navbar-center-right">...</div>
</div>
</div>
<nav class="uk-navbar-container uk-margin" uk-navbar>
<div class="uk-navbar-center">
<div class="uk-navbar-center-left uk-visible@m">
<ul class="uk-navbar-nav">
<li class="uk-active"><a href="#">Активное</a></li>
<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><a href="#">Элемент списка</a></li>
</ul>
</div>
</li>
</ul>
</div>
<a class="uk-navbar-item uk-logo" href="#">БРЕНД</a>
<div class="uk-navbar-center-right uk-visible@m">
<ul class="uk-navbar-nav">
<li><a href="#">Матроскин</a></li>
</ul>
</div>
</div>
</nav>Navbar и Toggle
Navbar и иконка-переключатель Toggle
Добавьте класс .uk-navbar-toggle и атрибут uk-navbar-toggle-icon к элементу <a> или <div>,
чтобы создать значок в качестве переключателя меню.
По умолчанию JavaScript не подключен к переключателю. Например, вы можете добавить навигацию вне холста из компонента Offcanvas или модальное окно из компонента Modal.
<div class="uk-navbar-container" uk-navbar>
<div class="uk-navbar-left">
<a class="uk-navbar-toggle" uk-navbar-toggle-icon href=""></a>
</div>
</div>
<nav class="uk-navbar uk-navbar-container uk-margin">
<div class="uk-navbar-left">
<a class="uk-navbar-toggle" uk-navbar-toggle-icon href="#"></a>
</div>
</nav>
<nav class="uk-navbar-container uk-margin">
<div class="uk-container">
<div uk-navbar>
<div class="uk-navbar-left">
<a class="uk-navbar-toggle" href="#">
<span uk-navbar-toggle-icon></span>
<span class="uk-margin-small-left">Меню</span>
</a>
</div>
<div class="uk-navbar-right">
<button class="uk-navbar-toggle" uk-navbar-toggle-icon type="button"></button>
</div>
</div>
</div>
</nav>Смена иконки меню при переключении
Чтобы заменить иконку меню с плавной анимацией при переключении,
с иконки меню «гамбургер» на значок закрытия, просто добавьте класс .uk-navbar-toggle-animate.
<a class="uk-navbar-toggle uk-navbar-toggle-animate" uk-navbar-toggle-icon href=""></a>
<nav class="uk-navbar-container">
<div class="uk-container">
<div uk-navbar="mode: click">
<div class="uk-navbar-left">
<a class="uk-navbar-toggle uk-navbar-toggle-animate" uk-navbar-toggle-icon 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><a href="#">Ещё пункт меню</a></li>
</ul>
</div>
</div>
</div>
</div>
</nav>Navbar и Dropdown
Выпадающий список панели навигации
Панель навигации может содержать раскрывающийся список компонента Dropdown.
Просто добавьте в раскрывающийся список модификатор .uk-navbar-dropdown, чтобы он идеально вписывался в стиль навигационной панели.
Добавьте класс .uk-navbar-dropdown-nav к навигации внутри раскрывающегося меню Dropdown.
<ul class="uk-navbar-nav">
<li>
<a href=""></a>
<div class="uk-navbar-dropdown">
<ul class="uk-nav uk-navbar-dropdown-nav">...</ul>
</div>
</li>
</ul>
Чтобы определить подзаголовок (субтитр) в dropdown-меню, добавьте к элементу класс .uk-nav-subtitle.
...
<ul class="uk-nav uk-navbar-dropdown-nav">
...
<div class="uk-nav-subtitle">подзаголовок</div>
...
</ul>
...
<nav class="uk-navbar-container" uk-navbar>
<div class="uk-navbar-left">
<ul class="uk-navbar-nav">
<li class="uk-active"><a href="#">Активное</a></li>
<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>
<li class="uk-visible@s"><a href="#">Эксклюзив</a></li>
</ul>
</div>
<div class="uk-navbar-right uk-visible@m">
<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>Режим «Click»
Родительский элемент внутри панели навигации Navbar может быть включен (открываться) либо при наведении курсора мыши,
либо при нажатии на так называемый переключатель. Просто добавьте к атрибуту uk-navbar опцию mode: click,
чтобы меню начало открываться при клике.
<nav class="uk-navbar-container" uk-navbar="mode: click">...</nav>
<nav class="uk-navbar-container uk-margin" uk-navbar="mode: click">
<div class="uk-navbar-left">
<ul class="uk-navbar-nav">
<li class="uk-active"><a href="javascript:void(0)">Активное</a></li>
<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><a href="#">Ещё один пункт</a></li>
</ul>
</div>
</li>
<li class="uk-visible@s"><a href="javascript:void(0)">Фреймворк</a></li>
</ul>
</div>
</nav>Dropdown:: Расположение: align, target
Align:: Выравнивание выпадающего списка. Позиция
По умолчанию выпадающие списки расположены под элементом панели навигации и выровнены по левому краю.
Чтобы изменить выравнивание, установите опцию align для атрибута uk-navbar.
| Позиция | Описание |
|---|---|
left |
Выравнивает раскрывающееся содержимое по левому краю. |
right |
Выравнивает раскрывающееся содержимое по правому краю. |
center |
Выравнивает раскрывающееся содержимое по центру. |
<div uk-navbar="align: center"></div>
<div class="uk-navbar-container" uk-navbar="align: center">
<div class="uk-navbar-center">
<ul class="uk-navbar-nav">
<li>
<a href="#">Center</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>
</div>Target
Выпадающие списки Dropdown могут быть выровнены по "границе" навигационной панели.
Просто добавьте к атрибуту uk-navbar параметр target: SELECTOR.
Добавьте параметр align: left, align: center или align: right, чтобы изменить выравнивание.
<nav class="uk-navbar-container" uk-navbar="target: !.uk-navbar">...</nav>
Открытие выпадающего по центру
<nav class="uk-navbar-container" uk-navbar="target: !.uk-navbar; align: center;">
<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>
<li>
<a href="#">Двойное</a>
<div class="uk-navbar-dropdown uk-navbar-dropdown-width-2">
<div class="uk-drop-grid uk-child-width-1-2" uk-grid>
<div>
<ul class="uk-nav uk-navbar-dropdown-nav">
<li class="uk-active"><a href="#">Активный 1</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-navbar-dropdown-nav">
<li class="uk-active"><a href="#">Активный 2</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>
<li>
<a href="#">Трио</a>
<div class="uk-navbar-dropdown uk-navbar-dropdown-width-3">
<div class="uk-drop-grid uk-child-width-1-3" uk-grid>
<div>
<ul class="uk-nav uk-navbar-dropdown-nav">
<li class="uk-active"><a href="#">Активный 1</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-navbar-dropdown-nav">
<li class="uk-active"><a href="#">Активный 2</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-navbar-dropdown-nav">
<li class="uk-active"><a href="#">Активный 3</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>
<div class="uk-navbar-right">
<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>Панель «Dropbar»
Панель Dropbar занимает всю ширину панели навигации и
отображает раскрывающийся список без стилей по умолчанию.
Чтобы разместить выпадающее меню внутри такой dropbar-панели,
добавьте опцию dropbar: true в панель uk-navbar.
При желании, можно использовать параметр dropbar-anchor,
чтобы указать, после какого элемента в разметку будет вставлена панель полной ширины.
<nav class="uk-navbar-container" uk-navbar="dropbar: true;">...</nav>
<div class="uk-position-relative">
<nav class="uk-navbar-container">
<div class="uk-container">
<div uk-navbar="dropbar: true; dropbar-anchor: !.uk-navbar-container; target-y: !.uk-navbar-container">
<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>
<li>
<a href="#">Панель</a>
<div class="uk-navbar-dropdown uk-navbar-dropdown-width-2">
<div class="uk-drop-grid uk-child-width-1-2" uk-grid>
<div>
<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>
<div>
<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>
</div>
</div>
</li>
</ul>
</div><!-- // .uk-navbar-left -->
<div class="uk-navbar-right">
<ul class="uk-navbar-nav">
<li>
<a href="#dropbar">Dropbar</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><!-- // .uk-navbar-right -->
</div>
</div>
</nav>
</div>Drop: «Stretch»
Чтобы растянуть меню,
распределить пространство выравнивая выпадающий список (меню Dropdown) по ширине,
используйте компонент Drop (Выпадение) вместе с его возможностями позиционирования,
а именно, используем параметр stretch.
<div class="uk-navbar-dropdown" uk-drop="boundary: !.uk-navbar; stretch: x; flip: false">…</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" uk-drop="boundary: !.uk-navbar-nav; stretch: x; flip: false">
<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>
<li>
<a href="#">Растянутый</a>
<div class="uk-navbar-dropdown" uk-drop="boundary: !.uk-navbar; stretch: x; flip: false">
<div class="uk-drop-grid uk-child-width-1-2" uk-grid>
<div>
<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>
<div>
<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>
</div>
</div>
</li>
<li><a href="#">Пункт</a></li>
</ul>
</div>
</nav>Иконка для родителя
Добавление иконки в родительский пункт меню
Для того чтобы создать родительский значок, просто добавьте атрибут uk-navbar-parent-icon к элементу <span>.
<ul class="uk-navbar-nav">
<li>
<a href="">Родитель <span uk-navbar-parent-icon></span></a>
<div class="uk-navbar-dropdown">…</div>
</li>
</ul>
<nav class="uk-navbar-container">
<div class="uk-container">
<div uk-navbar>
<div class="uk-navbar-left uk-visible@m">
<ul class="uk-navbar-nav">
<li class="uk-active"><a href="#">Активное</a></li>
<li>
<a href="#">Родительский<span uk-navbar-parent-icon></span></a>
<div class="uk-navbar-dropdown">
<ul class="uk-nav uk-navbar-dropdown-nav">
<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>
</div>
</div>
</nav>Dropdown: Ширина и grid-сетка, столбцы
Несколько столбцов (колонок) и ширина в навигации
Компонент раскрывающегося списка Dropdown позволяет упорядочить раскрывающийся контент в столбцах (колонках).
Вы можете поместить сетку (grid) из компонента Grid при построении шаблона.
Если сетка должна автоматически складываться всякий раз, когда раскрывающийся список больше не соответствует своему контейнеру,
просто добавьте класс .uk-drop-grid.
Колонки будут аккуратно складываться друг под друга, если они не помещаются больше в контейнер.
Чтобы разместить до пяти колонок, необходимо добавить один из следующих классов:
| Класс | Описание |
|---|---|
.uk-navbar-dropdown-width-2 |
Добавьте этот класс, чтобы удвоить ширину раскрывающегося списка. |
.uk-navbar-dropdown-width-3 |
Добавьте этот класс, чтобы утроить ширину раскрывающегося списка. |
.uk-navbar-dropdown-width-4 |
Добавьте этот класс, чтобы умножить ширину раскрывающегося списка на четыре. |
.uk-navbar-dropdown-width-5 |
Добавьте этот класс, чтобы увеличить ширину выпадающего списка в пять раз. |
<div class="uk-navbar-dropdown uk-navbar-dropdown-width-2">
<div class="uk-drop-grid uk-child-width-1-2" uk-grid>
<div>
<ul class="uk-nav uk-navbar-dropdown-nav">...</ul>
</div>
<div>...</div>
</div>
</div>
Навигация: утроенная ширина раскрывающегося списка в 2 колонки
<nav class="uk-navbar-container uk-container" uk-navbar>
<div class="uk-navbar-left">
<ul class="uk-navbar-nav">
<li>
<a href="#">Две колонки утроено</a>
<div class="uk-navbar-dropdown uk-navbar-dropdown-width-3">
<div class="uk-drop-grid uk-child-width-1-2" uk-grid>
<div>
<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>
<div>
<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>
</div>
</div>
</li>
</ul>
</div>
</nav>Sticky: Липкая навигация
Sticky Navbar: Закреплённая панель навигации
Для закреплённой панели меню Navbar необходимо установить панель навигации внутри контейнера
с атрибутом uk-sticky из компонента Sticky.
Сама фиксированная панель навигации имеет класс-модификатор uk-navbar-sticky,
который обеспечивает своеобразный стиль в липком состоянии
когда панель закреплена (например, добавляется тень от блока).
Чтобы позволить липкому компоненту динамически добавлять и удалять этот класс,
установите cls-active: uk-navbar-sticky.
Чтобы гарантированно добавить класс в navbar-контейнер, установите sel-target: .uk-navbar-container.
<div uk-sticky="sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky">
<nav class="uk-navbar-container" uk-navbar>
...
</nav>
</div>
Липкая панель навигации
<div uk-sticky="sel-target: .uk-navbar-container;
cls-active: uk-navbar-sticky uk-box-shadow-small;
end: #example-sticky-dropbar;
offset: 60">
<nav class="uk-navbar-container">
<div class="uk-container">
<div uk-navbar>
<div class="uk-navbar-left">
<ul class="uk-navbar-nav">
<li class="uk-active"><a href="#">Активное</a></li>
<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><a href="#">Пункт меню</a></li>
</ul>
</div>
</li>
<li><a href="#">Пунктик</a></li>
</ul>
</div>
</div>
</div>
</nav>
</div>
При использовании прикреплённой навигации вы можете отобразить панель
Dropbar, что означает, что выдвигаемая навигация будет отображаться по всей ширине под панелью навигации.
Просто установите dropbar: true внутри атрибута uk-navbar.
<div uk-sticky="sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky">
<nav class="uk-navbar-container" uk-navbar="dropbar: true;">
...
</nav>
</div>
Прикреплённая навигация с панелью Dropbar
<div uk-sticky="sel-target: .uk-navbar-container;
cls-active: uk-navbar-sticky uk-box-shadow-small;
end: + *;
offset: 60">
<nav class="uk-navbar-container" uk-navbar="dropbar: true;">
<div class="uk-navbar-left">
<ul class="uk-navbar-nav">
<li class="uk-active"><a href="#">Активное</a></li>
<li>
<a href="#">Dropbar</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="#">Пункт меню Dropbar</a></li>
<li><a href="#">Ещё названице</a></li>
</ul>
</div>
</li>
<li><a href="#">Пунктик</a></li>
</ul>
</div>
</nav>
</div>
<div class="uk-height-small"></div>Sticky: Прозрачная панель
Прозрачная липкая панель навигации
Когда вы используете прозрачную панель навигации,
ваша разметка содержит класс .uk-navbar-transparent вместе с .uk-light или .uk-dark.
Когда навигационная панель прикреплена (см. закреплённая навигация),
обычно требуется удалить эти классы и добавить их, когда навигационная панель вернется в обычное незакрепленное состояние.
Для этого установите cls-inactive: uk-navbar-transparent uk-light.
По умолчанию моментальное переключение выглядит не очень привлекательно.
Вместо этого мы можем установить start: 300, чтобы навигационная панель сначала исчезла, а затем снова появилась,
когда пользователь прокрутил страницу на 300 пикселей ниже.
В этом случае мы также можем определить, чтобы навигационная панель появлялась с анимацией,
для этого просто установите animation: uk-animation-slide-top.
<div uk-sticky="animation: uk-animation-slide-top;
sel-target: .uk-navbar-container;
cls-active: uk-navbar-sticky;
cls-inactive: uk-navbar-transparent uk-light;
start: 200">
<nav class="uk-navbar-container uk-light" uk-navbar>
...
</nav>
</div>
Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Вдали от всех живут они в буквенных домах на берегу Семантика большого языкового океана. Маленький ручеек Даль журчит по всей стране и обеспечивает ее всеми необходимыми правилами.
Эта парадигматическая страна, в которой жаренные члены предложения залетают прямо в рот. Даже всемогущая пунктуация не имеет власти над рыбными текстами, ведущими безорфографичный образ жизни. Однажды одна маленькая строчка рыбного текста по имени Lorem ipsum решила выйти в большой мир грамматики.
Великий Оксмокс предупреждал ее о злых запятых, диких знаках вопроса и коварных точках с запятой, но текст не дал сбить себя с толку. Он собрал семь своих заглавных букв, подпоясал инициал за пояс и пустился в дорогу.
<div class="uk-section-secondary uk-preserve-color">
<div uk-sticky="animation: uk-animation-slide-top;
sel-target: .uk-navbar-container;
cls-active: uk-navbar-sticky;
cls-inactive: uk-navbar-transparent uk-light;
start: 200;
end: ! *;
offset: 60">
<nav class="uk-navbar-container uk-light">
<div class="uk-container uk-container-expand">
<div uk-navbar="align: center">
<ul class="uk-navbar-nav">
<li class="uk-active"><a href="#">Активное</a></li>
<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><a href="#">Пункт меню</a></li>
</ul>
</div>
</li>
<li class="uk-visible@m"><a href="#">Прилипающее меню</a></li>
</ul>
</div>
</div>
</nav>
</div>
<div class="uk-section uk-light">
<div class="uk-container">
<p>Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Вдали от всех живут они в буквенных домах на берегу Семантика большого языкового океана. Маленький ручеек Даль журчит по всей стране и обеспечивает ее всеми необходимыми правилами.</p>
<p>Эта парадигматическая страна, в которой жаренные члены предложения залетают прямо в рот. Даже всемогущая пунктуация не имеет власти над рыбными текстами, ведущими безорфографичный образ жизни. Однажды одна маленькая строчка рыбного текста по имени Lorem ipsum решила выйти в большой мир грамматики.</p>
<p>Великий Оксмокс предупреждал ее о злых запятых, диких знаках вопроса и коварных точках с запятой, но текст не дал сбить себя с толку. Он собрал семь своих заглавных букв, подпоясал инициал за пояс и пустился в дорогу.</p>
</div>
</div>
</div>Sticky: Dropbar прозрачный режим
Чтобы оптимизировать внешний вид прозрачной панели навигации, если она открывает дропбар, установите для параметра dropbar-transparent-mode одно из следующих значений.
| Режим | Описание |
|---|---|
remove |
Убрать прозрачность панели навигации при открытии dropbar и добавить её при закрытии dropbar. |
behind |
Откройте дропбар за панелью навигации, чтобы содержимое навигационной панели отображалось над фоном дропбара. |
Используйте компонент Inverse, чтобы окрашивать прозрачную панель навигации в зависимости от фона за ней.
Чтобы предотвратить изменение цвета навигационной панели, когда она перестает быть прозрачной, просто добавьте параметр sel-active: .uk-navbar-transparent к атрибуту uk-inverse.
Например, установите dropbar-transparent-mode: remove, если навигационная панель будет прозрачной только в разделе героя, но не при наклеивании.
<div uk-sticky="start: 200; animation: uk-animation-slide-top; sel-target: .uk-navbar-container;
cls-active: uk-navbar-sticky; cls-inactive: uk-navbar-transparent">
<nav class="uk-navbar-container"
uk-inverse="sel-active: .uk-navbar-transparent"
uk-navbar="dropbar: true; dropbar-transparent-mode: remove">…</nav>
</div>
Проснувшись однажды утром после беспокойного сна, Грегор Замза обнаружил, что он у себя в постели превратился в страшное насекомое.
Лежа на панцирнотвердой спине, он видел, стоило ему приподнять голову, свой коричневый, выпуклый, разделенный дугообразными чешуйками живот, на верхушке которого еле держалось готовое вот-вот окончательно сползти одеяло.
Его многочисленные, убого тонкие по сравнению с остальным телом ножки беспомощно копошились у него перед глазами. «Что со мной случилось? » – подумал он. Это не было сном. Его комната, настоящая, разве что слишком маленькая, но обычная комната, мирно покоилась в своих четырех хорошо знакомых стенах. Над столом, где были разложены распакованные образцы сукон.
<div class="uk-section-secondary uk-background-cover uk-preserve-color uk-inverse-light">
<div uk-sticky="start: 170; animation: uk-animation-slide-top; sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky; cls-inactive: uk-navbar-transparent; end: ! *; offset: 80">
<nav class="uk-navbar-container" uk-inverse="sel-active: .uk-navbar-transparent">
<div class="uk-container">
<div uk-navbar="dropbar: true; dropbar-transparent-mode: remove; dropbar-anchor: !.uk-navbar-container; target-y: !.uk-navbar-container">
<div class="uk-navbar-left">
<ul class="uk-navbar-nav">
<li class="uk-active"><a href="#">Активное</a></li>
<li>
<a href="#">Родитель</a>
<div class="uk-navbar-dropdown">
<ul class="uk-nav uk-navbar-dropdown-nav">
<li class="uk-nav-header">Заголовок</li>
<li class="uk-active"><a href="#">Активное</a></li>
<li><a href="#">Пункт меню</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#">Пункт меню</a></li>
</ul>
</div>
</li>
<li class="uk-visible@m">
<a href="#">Родительский</a>
<div class="uk-navbar-dropdown uk-navbar-dropdown-width-2">
<div class="uk-drop-grid uk-child-width-1-2" uk-grid>
<div>
<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>
<div>
<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>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</nav>
</div>
<div class="uk-section uk-light">
<div class="uk-container">
<p>Проснувшись однажды утром после беспокойного сна, Грегор Замза обнаружил, что он у себя в постели превратился в страшное насекомое.</p>
<p>Лежа на панцирнотвердой спине, он видел, стоило ему приподнять голову, свой коричневый, выпуклый, разделенный дугообразными чешуйками живот, на верхушке которого еле держалось готовое вот-вот окончательно сползти одеяло.</p>
<p>Его многочисленные, убого тонкие по сравнению с остальным телом ножки беспомощно копошились у него перед глазами. «Что со мной случилось? » – подумал он. Это не было сном. Его комната, настоящая, разве что слишком маленькая, но обычная комната, мирно покоилась в своих четырех хорошо знакомых стенах. Над столом, где были разложены распакованные образцы сукон.</p>
</div>
</div>
</div>
В качестве альтернативы, если панель навигации всегда прозрачна, даже если она закреплена,
установите dropbar-transparent-mode: behind, чтобы открыть дропбар за панелью навигации, и она перестанет быть прозрачной.
<div class="uk-inverse-light">
<div uk-sticky="sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky">
<nav class="uk-navbar-container uk-navbar-transparent uk-position-relative uk-position-z-index-high"
uk-inverse="sel-active: .uk-navbar-transparent"
uk-navbar="dropbar: true; dropbar-transparent-mode: behind; dropbar-anchor: !.uk-navbar-container; target-y: !.uk-navbar-container">…</nav>
</div>
</div>
Проснувшись однажды утром после беспокойного сна, Грегор Замза обнаружил, что он у себя в постели превратился в страшное насекомое.
Лежа на панцирнотвердой спине, он видел, стоило ему приподнять голову, свой коричневый, выпуклый, разделенный дугообразными чешуйками живот, на верхушке которого еле держалось готовое вот-вот окончательно сползти одеяло.
Его многочисленные, убого тонкие по сравнению с остальным телом ножки беспомощно копошились у него перед глазами. «Что со мной случилось? » – подумал он. Это не было сном. Его комната, настоящая, разве что слишком маленькая, но обычная комната, мирно покоилась в своих четырех хорошо знакомых стенах. Над столом, где были разложены распакованные образцы сукон.
<div class="uk-section-secondary uk-background-cover uk-preserve-color uk-inverse-light">
<div uk-sticky="sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky; end: ! *; offset: 80">
<nav class="uk-navbar-container uk-navbar-transparent uk-position-relative uk-position-z-index-high" uk-inverse="sel-active: .uk-navbar-transparent">
<div class="uk-container">
<div uk-navbar="dropbar: true; dropbar-transparent-mode: behind; dropbar-anchor: !.uk-navbar-container; target-y: !.uk-navbar-container">
<div class="uk-navbar-left">
<ul class="uk-navbar-nav">
<li class="uk-active"><a href="#">Активное</a></li>
<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>
<li class="uk-visible@m">
<a href="#">Родительский</a>
<div class="uk-navbar-dropdown uk-navbar-dropdown-width-2">
<div class="uk-drop-grid uk-child-width-1-2" uk-grid>
<div>
<ul class="uk-nav uk-navbar-dropdown-nav">
<li class="uk-active"><a href="#">Активное</a></li>
<li><a href="#">Пункт меню</a></li>
</ul>
</div>
<div>
<ul class="uk-nav uk-navbar-dropdown-nav">
<li class="uk-active"><a href="#">Активное</a></li>
<li><a href="#">Пункт меню</a></li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</nav>
</div>
<div class="uk-section uk-light">
<div class="uk-container">
<p>Проснувшись однажды утром после беспокойного сна, Грегор Замза обнаружил, что он у себя в постели превратился в страшное насекомое.</p>
<p>Лежа на панцирнотвердой спине, он видел, стоило ему приподнять голову, свой коричневый, выпуклый, разделенный дугообразными чешуйками живот, на верхушке которого еле держалось готовое вот-вот окончательно сползти одеяло.</p>
<p>Его многочисленные, убого тонкие по сравнению с остальным телом ножки беспомощно копошились у него перед глазами. «Что со мной случилось? » – подумал он. Это не было сном. Его комната, настоящая, разве что слишком маленькая, но обычная комната, мирно покоилась в своих четырех хорошо знакомых стенах. Над столом, где были разложены распакованные образцы сукон.</p>
</div>
</div>
</div>
При использовании липкой прозрачной панели навигации ее часто смешивают с фоном страницы.
В этом случае дропбар-панель необходимо разместить за пределами элемента смешивания с помощью dropbar-anchor, а раскрывающиеся списки — с помощью container.
В противном случае дропбар и раскрывающиеся списки также будут сливаться с фоном страницы.
Это также означает, что дропбар будет размещен за пределами липкого контейнера.
В результате только панель навигации останется прикрепленной, а открытая дропбар-панель будет прокручиваться за пределы поля зрения.
Вот почему добавлена новая опция close-on-scroll, которая позволяет закрывать дропбар перед прокруткой.
Поскольку только белый цвет хорошо сочетается с фоном страницы, убедитесь, что навигационная панель имеет светлые цвета, или используйте класс .uk-light.
Не используйте атрибут uk-inverse для автоматического окрашивания панели навигации.
<div class="uk-blend-difference uk-position-z-index-high" uk-sticky="sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky">
<nav class="uk-navbar-container uk-navbar-transparent uk-light" uk-navbar="container: !.uk-section-default; dropbar: true; dropbar-transparent-mode: behind; close-on-scroll: true; dropbar-anchor: !.uk-blend-difference">…</nav>
</div>
Проснувшись однажды утром после беспокойного сна, Грегор Замза обнаружил, что он у себя в постели превратился в страшное насекомое.
Лежа на панцирнотвердой спине, он видел, стоило ему приподнять голову, свой коричневый, выпуклый, разделенный дугообразными чешуйками живот, на верхушке которого еле держалось готовое вот-вот окончательно сползти одеяло.
Его многочисленные, убого тонкие по сравнению с остальным телом ножки беспомощно копошились у него перед глазами. «Что со мной случилось? » – подумал он. Это не было сном. Его комната, настоящая, разве что слишком маленькая, но обычная комната, мирно покоилась в своих четырех хорошо знакомых стенах. Над столом, где были разложены распакованные образцы сукон.
<div class="uk-section-default uk-background-muted uk-preserve-color" style="">
<div id="test">
<div class="uk-blend-difference uk-position-z-index-high"
uk-sticky="sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky; end: !.uk-section-default; offset: 80">
<nav class="uk-navbar-container uk-navbar-transparent uk-light">
<div class="uk-container">
<div uk-navbar="container: #test;
dropbar: true;
dropbar-transparent-mode: behind;
close-on-scroll: true;
dropbar-anchor: !.uk-blend-difference; target-y: #test .uk-navbar-container">
<div class="uk-navbar-left">
<ul class="uk-navbar-nav">
<li class="uk-active"><a href="#">Активный</a></li>
<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>
<li class="uk-visible@m"><a href="#">Пункт</a></li>
</ul>
</div>
</div>
</div>
</nav>
</div>
</div>
<div class="uk-section">
<div class="uk-container">
<p>Проснувшись однажды утром после беспокойного сна, Грегор Замза обнаружил, что он у себя в постели превратился в страшное насекомое.</p>
<p>Лежа на панцирнотвердой спине, он видел, стоило ему приподнять голову, свой коричневый, выпуклый, разделенный дугообразными чешуйками живот, на верхушке которого еле держалось готовое вот-вот окончательно сползти одеяло.</p>
<p>Его многочисленные, убого тонкие по сравнению с остальным телом ножки беспомощно копошились у него перед глазами. «Что со мной случилось? » – подумал он. Это не было сном. Его комната, настоящая, разве что слишком маленькая, но обычная комната, мирно покоилась в своих четырех хорошо знакомых стенах. Над столом, где были разложены распакованные образцы сукон.</p>
</div>
</div>
</div>Sticky: Цвета по отдельности
Цвет в панели навигации по отдельности
Чтобы применить другой цвет в определённых участках панели навигации, по отдельности, в зависимости от фона страницы,
просто добавьте параметр
target: .uk-navbar-left, .uk-navbar-center, .uk-navbar-right к атрибуту uk-inverse.
<div class="uk-position-relative">
<div class="uk-position-top">
<div uk-sticky="sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky">
<nav class="uk-navbar-container uk-navbar-transparent"
uk-inverse="target: .uk-navbar-left, .uk-navbar-center, .uk-navbar-right" uk-navbar>
…
</nav>
</div>
</div>
<div class="uk-child-width-1-3@s uk-grid-collapse uk-grid-match" uk-grid>
<div>
<div class="uk-tile uk-tile-default">…</div>
</div>
<div>
<div class="uk-tile uk-tile-primary">…</div>
</div>
<div>
<div class="uk-tile uk-tile-secondary">…</div>
</div>
</div>
</div>
Больше информаци о инверсии и изменении цвета в зависимости от фона страницы можно найти в компоненте Inverse .
Душа моя озарена супер радостью в здешнем краю.
Я так счастлив, как в эти минуты поднимается пар.
Когда оно проскальзывает в его святая святых.
Я так счастлив, как в эти минуты поднимается пар.
Когда оно проскальзывает в его святая святых.
Душа моя озарена супер радостью в здешнем краю.
Когда оно проскальзывает в его святая святых.
Душа моя озарена супер радостью в здешнем краю.
Я так счастлив, как в эти минуты поднимается пар.
<style>
#demo-separately .uk-light .test-link {color: aqua;}
#demo-separately .uk-dark .test-link {color: red;}
</style>
<div id="demo-separately" class="uk-position-relative">
<div class="uk-position-top">
<div uk-sticky="sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky; end: !.uk-position-relative; offset: 80">
<nav class="uk-navbar-container uk-navbar-transparent" uk-inverse="target: .uk-navbar-left, .uk-navbar-center, .uk-navbar-right">
<div class="uk-container">
<div uk-navbar>
<div class="uk-navbar-left">
<ul class="uk-navbar-nav">
<li class="uk-active"><a href="#">Акт</a></li>
<li><a href="#">Пункт</a></li>
</ul>
</div>
<div class="uk-navbar-center uk-visible@l">
<ul class="uk-navbar-nav">
<li class="uk-active"><a href="">Акт</a></li>
<li><a href="#">Пункт</a></li>
</ul>
</div>
<div class="uk-navbar-right uk-visible@m">
<ul class="uk-navbar-nav">
<li class="uk-active"><a href="">Акт</a></li>
<li>
<a href="#" class="test-link">
Цвет
</a>
</li>
</ul>
</div>
</div>
</div>
</nav>
</div>
</div>
<div class="uk-child-width-1-3@s uk-grid-collapse uk-grid-match" uk-grid>
<div>
<div class="uk-tile uk-tile-default">
<div uk-height-placeholder="!.uk-position-relative .uk-position-top" class="uk-margin-remove-adjacent"></div>
<p>Душа моя озарена супер радостью в здешнем краю.</p>
</div>
</div>
<div>
<div class="uk-tile uk-tile-primary">
<div uk-height-placeholder="!.uk-position-relative .uk-position-top" class="uk-margin-remove-adjacent"></div>
<p>Я так счастлив, как в эти минуты поднимается пар.</p>
</div>
</div>
<div>
<div class="uk-tile uk-tile-secondary">
<div uk-height-placeholder="!.uk-position-relative .uk-position-top" class="uk-margin-remove-adjacent"></div>
<p>Когда оно проскальзывает в его святая святых.</p>
</div>
</div>
</div>
<div class="uk-child-width-1-3@s uk-grid-collapse uk-grid-match" uk-grid>
<div>
<div class="uk-tile uk-tile-primary">
<p>Я так счастлив, как в эти минуты поднимается пар.</p>
</div>
</div>
<div>
<div class="uk-tile uk-tile-muted">
<p>Когда оно проскальзывает в его святая святых.</p>
</div>
</div>
<div>
<div class="uk-tile uk-tile-default">
<p>Душа моя озарена супер радостью в здешнем краю.</p>
</div>
</div>
</div>
<div class="uk-child-width-1-3@s uk-grid-collapse uk-grid-match" uk-grid>
<div>
<div class="uk-tile uk-tile-default">
<p>Когда оно проскальзывает в его святая святых.</p>
</div>
</div>
<div>
<div class="uk-tile uk-tile-secondary">
<p>Душа моя озарена супер радостью в здешнем краю.</p>
</div>
</div>
<div>
<div class="uk-tile uk-tile-primary">
<p>Я так счастлив, как в эти минуты поднимается пар.</p>
</div>
</div>
</div>
</div>Параметры для атрибута
При использовании компонента Navbar к атрибуту можно применить любой из этих параметров. Разделяйте несколько вариантов точкой с запятой. Для получения дополнительной информации ознакомьтесь с главой Конфигурация компонента.
Опции компонента
| Опция | Значение | По умолчанию | Описание |
|---|---|---|---|
align |
String | left |
Выравнивание Dropdown: left, right, center |
dropbar |
Boolean | false |
Включить или отключить поведение dropbar. |
dropbar-anchor |
CSS selector | false |
Если установлено, выпадающая панель будет вставлена после элемента anchor. |
dropbar-transparent-mode |
Boolean, String | false |
Прозрачный режим дропбар (behind, remove). |
stretch |
Boolean, String | false |
Растянуть содержимое по обеим (true) или заданным осям (x, y). |
mode |
String | click, hover |
Разделенный запятыми список режимов выпададения: click, hover |
delay-show |
Number | 0 |
Время задержки в режиме наведения до появления раскрывающегося списка в миллисекундах. |
delay-hide |
Number | 800 |
Время задержки в режиме наведения до скрытия раскрывающегося списка в миллисекундах. |
boundary |
CSS selector | true |
Область, которую dropdown не может превышать, заставляя его переворачиваться и сдвигаться. По умолчанию ближайший предок прокрутки. |
target |
Boolean, CSS selector | false |
Элемент, к которому позиционируется dropdown ( true for window). |
target-x |
Boolean, CSS selector | false |
Ось X элемента, на которую позиционируется dropdown ( true for window). |
target-y |
Boolean, CSS selector | false |
Ось Y элемента, на которую позиционируется dropdown ( true for window). |
offset |
Number | 0 |
Смещение выпадающего контейнера. |
animation |
String | uk-animation-fade |
Имена анимаций, разделенные пробелами. |
animate-out |
Boolean | false |
Использовать анимацию при закрытии. |
bg-scroll |
Boolean | true |
Разрешить фоновую прокрутку при открытии dropdown. |
close-on-scroll |
Boolean | false |
Закройте dropdown при прокрутке родительского scroll-контейнера. |
duration |
Number | 200 |
Продолжительность анимации. |
container |
Boolean | false |
Определите целевой контейнер с помощью селектора, чтобы указать, где раскрывающийся список должен быть добавлен в DOM. |
JavaScript
Узнайте больше о использовании JavaScript в компонентах фреймворка UIkit 3.
Инициализация
UIkit.navbar(element, options);
События
Следующие события будут инициированы для элементов компонента «Navbar»:
| Имя события | Описание |
|---|---|
beforeshow |
Срабатывает до показа элемента. Можно предотвратить отображение, вызвав событие preventDefault(). |
show |
Срабатывает после показа элемента. |
shown |
Запускается после завершения анимации показанного элемента. |
beforehide |
Срабатывает до того, как элемент скрыт. Можно предотвратить отображение, вызвав событие preventDefault(). |
hide |
Запускается после запуска анимации скрытия элемента. |
hidden |
Срабатывает после того, как элемент скрыт. |
Доступность
Компонент «Панель навигации» Navbar придерживается Disclosure Navigation Menu и автоматически устанавливает соответствующие состояния и свойства WAI-ARIA.
-
Элементы навигации и элементы переключения имеют
aria-expandedсостояние и свойствоaria-haspopup. - Переключаемые элементы также имеют свойство
aria-label.
Взаимодействие с клавиатурой
Доступ к компоненту Navbar можно получить с помощью клавиатуры используя следующие клавиши:
- Клавиши tab или shift+tab перемещают фокус внутрь или за пределы панели навигации.
- Клавиши left/right arrow перемещаются по элементам навигационной панели Navbar. В режиме наведения раскрывающийся список откроется автоматически. Если фокус находится на последнем элементе, он перемещается на первый элемент.
- Клавиши enter или space открывают и закрывают раскрывающийся список выбранного элемента панели навигации.
- Клавиши up/down arrow перемещаются по элементам навигации в раскрывающемся списке. Если фокус находится на последнем элементе, он перемещается на первый элемент.
- Клавиша esc закрывает любой раскрывающийся список, даже если фокус переместился на другой элемент.
Интернационализация
| Ключ | По умолчанию | Описание |
|---|---|---|
label |
Open Menu |
aria-label атрибут. |
Подробнее о переводе компонентов.