Компонент Панель навигации : 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>
Navbar
-
-
<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><a href="#">Ещё один пункт</a></li> </ul> </div> </li> <li><a href="#">Название</a></li> </ul> </div> </nav>
Несколько меню в панели навигации 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" 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"> <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-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"> <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> </nav>
Режим «Click»
Родительский элемент внутри панели навигации может быть включен (открываться) либо при наведении курсора мыши, либо при нажатии на так называемый переключатель. Просто добавьте к атрибуту 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:;">Активное</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="javascript:;">Фреймворк</a></li> </ul> </div> </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="/demo/img/light.jpg" alt=""> <div class="uk-position-top"> <nav class="uk-navbar-container uk-navbar-transparent" 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> </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> <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 uk-margin" uk-navbar> <div class="uk-navbar-left"> <a class="uk-navbar-item uk-logo" href="#">Лого</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"> <!-- Отдельный контейнер --> <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> </nav>
Центрированный логотип
Вы можете создать разделенное меню с центрированным логотипом, брендом. Просто добавьте класс uk-navbar-center-left
к одному navbar и класс uk-navbar-center-right
к другому в том же контейнере navbar. Таким образом ваш логотип будет по центру, а меню будет выровнено слева и справа.
div
.
<div class="uk-navbar-container" uk-navbar>
<div class="uk-navbar-center">
<div class="uk-navbar-center-left"><div>...</div></div>
<a href="" class="uk-navbar-item uk-logo"></a>
<div class="uk-navbar-center-right"><div>...</div></div>
</div>
</div>
-
-
<nav class="uk-navbar-container uk-margin" uk-navbar> <div class="uk-navbar-center"> <div class="uk-navbar-center-left"> <div> <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> </div> <a class="uk-navbar-item uk-logo" href="#">БРЕНД</a> <div class="uk-navbar-center-right"><div> <ul class="uk-navbar-nav"> <li><a href="#">Матроскин</a></li> </ul> </div></div> </div> </nav>
Navbar и переключатель Toggle
Добавьте класс .uk-navbar-toggle
и атрибут uk-navbar-toggle-icon
к элементу <a>
или <div>
, чтобы создать значок в качестве переключателя меню.
По умолчанию JavaScript не подключен к переключателю. Например, вы можете добавить навигацию вне холста из компонента Off-canvas или модальное окно из компонента 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 uk-navbar-container uk-margin"> <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> </nav>
Выпадающий список панели навигации
Панель навигации может содержать раскрывающийся список компонента 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>
Navbar и Dropdown
-
-
<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><a href="#">Эксклюзив</a></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>
Несколько столбцов (колонок) и ширина в навигации
Компонент раскрывающегося списка Dropdown позволяет упорядочить раскрывающийся контент в столбцах (колонках). Чтобы разместить до пяти колонок, вам необходимо добавить один из следующих классов.
Колонки будут аккуратно складываться друг под друга, если они не помещаются больше в контейнер.
Класс | Описание |
---|---|
.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-navbar-dropdown-grid uk-child-width-1-2" uk-grid>
<div>
<ul class="uk-nav uk-navbar-dropdown-nav">...</ul>
</div>
<div>...</div>
</div>
</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-navbar-dropdown-width-3"> <div class="uk-navbar-dropdown-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>
Утилита-плюшка «Boundary Align»
Выпадающие списки Dropdown могут быть выровнены по "границе" навигационной панели. Просто добавьте к атрибуту uk-navbar
параметр boundary-align: true
. Добавьте параметр align: left
, align: center
или align: right
, чтобы изменить выравнивание.
По умолчанию выпадающие списки выровнены по левому краю.
<nav class="uk-navbar-container" uk-navbar="boundary-align: true; align: center;">...</nav>
Открытие выпадающего по центру
-
-
<nav class="uk-navbar-container" uk-navbar="boundary-align: true; 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-navbar-dropdown-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> <div class="uk-navbar-dropdown uk-navbar-dropdown-width-3"> <div class="uk-navbar-dropdown-grid uk-child-width-1-3" 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> <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 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>
Утилита-плюшка «Justify»
Чтобы распределить пространство выравнивая выпадающий список меню Dropdown по ширине (одновременное выравнивание по левому и правому краю), используйте компонент Выпадение вместе с его возможностями позиционирования.
<div class="uk-navbar-dropdown" uk-drop="boundary: .parent; boundary-align: true; pos: bottom-justify;">...</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: !nav; boundary-align: true; pos: bottom-justify;"> <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: !nav; boundary-align: true; pos: bottom-justify;"> <div class="uk-navbar-dropdown-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>
Панель Dropbar
Панель Dropbar распространяется на всю ширину панели навигации и отображает раскрывающийся список без стилей по умолчанию. Чтобы разместить выпадающее меню внутри такой панели, добавьте опцию dropbar: true
в панель uk-navbar
.
<nav class="uk-navbar-container" uk-navbar="dropbar: true;">...</nav>
<div class="uk-navbar-dropbar"></div>
-
-
<div class="uk-position-relative"> <nav class="uk-navbar-container" uk-navbar="dropbar: true"> <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-navbar-dropdown-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 class="uk-navbar-right"> <ul class="uk-navbar-nav"> <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="#">Пункт меню</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> <div class="uk-navbar-dropbar"></div> </div>
Режим Push
По умолчанию панель Dropbar при раскрытии перекрывает содержимое сайта. Добавьте опцию dropbar-mode: push;
, чтобы изменить поведение сдвигая содержимое вниз.
<nav class="uk-navbar-container" uk-navbar="dropbar: true; dropbar-mode: push">...</nav>
<div class="uk-navbar-dropbar"></div>
После наведения на пункт меню контент расположенный ниже сдвигается
-
-
<div class="uk-position-relative" hidden> <nav class="uk-navbar-container" uk-navbar="dropbar: true; dropbar-mode: push"> <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="#">Push</a> <div class="uk-navbar-dropdown uk-navbar-dropdown-width-2"> <div class="uk-navbar-dropdown-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 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> <div class="uk-navbar-dropbar"></div> </div>
Липкая (закреплённая) панель навигации : Sticky 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; bottom: #example-sticky-dropbar; offset: 60"> <nav class="uk-navbar-container" uk-navbar style="position: relative; z-index: 980;"> <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> </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; bottom: #transparent-sticky-navbar; 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>
Прозрачная липкая панель навигации
Когда вы используете прозрачную панель навигации, ваша разметка содержит класс .uk-navbar-transparent
вместе с .uk-light
или .uk-dark
. Когда навигационная панель прикреплена (см. закреплённая навигация), обычно требуется удалить эти классы и добавить их, когда навигационная панель вернется в обычное незакрепленное состояние. Для этого установите cls-inactive: uk-navbar-transparent uk-light
.
По умолчанию моментальное переключение выглядит не очень привлекательно. Вместо этого мы можем установить top: 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;
top: 200">
<nav class="uk-navbar-container" 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; top: 200; bottom: #component-options; offset: 60"> <nav class="uk-navbar-container"> <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><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>
Опции компонента
При использовании компонента Navbar к атрибуту можно применить любой из этих параметров. Разделяйте несколько вариантов точкой с запятой. Для получения дополнительной информации ознакомьтесь с главой Конфигурация компонента.
Опция | Значение | По умолчанию | Описание |
---|---|---|---|
align |
String | left |
Выравнивание Dropdown: left , right , center |
mode |
String | click, hover |
Разделенный запятыми список режимов выпададения: click , hover |
delay-show |
Number | 0 |
Время задержки в режиме наведения до появления раскрывающегося списка в миллисекундах. |
delay-hide |
Number | 800 |
Время задержки в режиме наведения до скрытия раскрывающегося списка в миллисекундах. |
boundary |
CSS selector | window |
Referenced element to keep the dropdown's visibility. |
boundary-align |
Boolean | false |
Выравнивание выпадающего списка по "границе". |
offset |
Number | 0 |
Смещение выпадающего контейнера. |
dropbar |
Boolean | false |
Включить или отключить поведение dropbar. |
dropbar-mode |
String | slide |
Режим, в котором появляется dropbar: slide , push |
duration |
Number | 200 |
Длительность перехода в панели dropbar. |
JavaScript
Узнайте больше о использовании JavaScript в компонентах фреймворка UIkit 3.
Инициализация
UIkit.navbar(element, options);
События
Следующие события будут инициированы для элементов компонента «Navbar»:
Название | Описание |
---|---|
beforeshow |
Срабатывает до показа элемента. Может предотвратить показ, вернув false . |
show |
Срабатывает после показа элемента. |
shown |
Запускается после завершения анимации показанного элемента. |
beforehide |
Срабатывает до того, как элемент скрыт. Может предотвратить скрытие, вернув false . |
hide |
Запускается после запуска анимации скрытия элемента. |
hidden |
Срабатывает после того, как элемент скрыт. |