Навигации
Определяет различные стили для Панели навигации.
Использование
Навигационной панели компонент состоит из навигационной панели сам и один или несколько навигаций.
| Класс | Описание |
|---|---|
.uk-navbar |
Добавьте этот класс к <nav> элемент для определения компонента навигации. |
.uk-navbar-nav |
Добавьте этот класс к <ul> элемент для создания навигации. Используйте <a> элементы как меню предметов в списке. |
.uk-active |
Добавьте этот класс к элементу списка, чтобы применить активное состояние. |
.uk-parent |
Добавить этот класс, чтобы указать родительский пункт меню. |
Пример
Разметки
<nav class="uk-navbar">
<ul class="uk-navbar-nav">
<li class="uk-active"><a href="">...</a></li>
<li><a href="">...</a></li>
<li class="uk-parent"><a href="">...</a></li>
</ul>
</nav>Навигации флип
Добавить .uk-navbar-flip класс <div> элемент для группировки и выравнивания переходов и элементов вправо.
Пример
Разметки
<nav class="uk-navbar">
<div class="uk-navbar-flip">
<ul class="uk-navbar-nav">
<li><a href="">...</a></li>
</ul>
</div>
</nav>Навигации субтитров
Добавить .uk-navbar-nav-subtitle класс к <a> элемент в элементе списка, чтобы указать, что он имеет субтитров. Используйте <div> элемент для субтитров сам.
Пример
Разметки
<nav class="uk-navbar">
<ul class="uk-navbar-nav">
<li><a href="" class="uk-navbar-nav-subtitle">
...
<div>...</div>
</a></li>
</ul>
</nav>Содержание
Вы также можете добавлять пользовательский контент на навигационной панели, как текст, иконки, кнопок, форм или даже переключить. По умолчанию, нет JavaScript прикрепленный к пуговице. Как пример, вы можете добавить off-холст навигации от Off-холст компонент.
| Класс | Описание |
|---|---|
.uk-navbar-content |
Добавьте этот класс к <div> элемент, который служит контейнером для пользовательского Контента. Содержание должно быть отцентровано по вертикали. |
.uk-navbar-brand |
Добавить этот класс в сообщение <a> или <div> элемент для указания вашего бренда. |
.uk-navbar-center |
Добавить этот класс в центре панели содержимого или бренда. Элемент должен быть последним ребенком в навигационной панели. |
.uk-navbar-toggle |
Добавить этот класс в сообщение <a> или <div> элемент для создания иконка Как переключить. |
.uk-navbar-toggle-alt |
Добавить этот класс, чтобы создать альтернативную иконка Как переключить. |
Пример
Разметки
<nav class="uk-navbar">
<a href="" class="uk-navbar-brand">...</a>
<ul class="uk-navbar-nav">...</ul>
<div class="uk-navbar-content">...</div>
<div class="uk-navbar-content uk-navbar-center">...</div>
<a href="" class="uk-navbar-toggle"></a>
</nav>Адаптивный видимости
Чтобы отобразить или скрыть некоторые элементы навигации, просто добавьте один из aдаптивный видимость классы от Утилита компонент. Это пригождается, если вы хотите использовать для переключения триггера мобильной навигации например.
Пример
Изменить размер окна браузера, чтобы увидеть его в действии.
Разметки
<nav class="uk-navbar">
<ul class="uk-navbar-nav uk-hidden-small">...</ul>
<a href="#my-id" class="uk-navbar-toggle uk-visible-small" data-uk-offcanvas></a>
</nav>
<div id="my-id" class="uk-offcanvas">
...
</div>Примечание В этом примере мы добавили off-холст боковой панели лутших Off-холст компонент.
Модификаторы
Для отображения навигационной панели в другом стиле, просто добавьте модификатор классов. Эти модификаторы могут быть объединены друг с другом
Навигации прилагается
Добавить .uk-navbar-attached класс для оптимизации навигации укладка прикрепляется к верхней области просмотра. Например, закругленные углы будут удалены.
Пример
Разметки
<nav class="uk-navbar uk-navbar-attached">...</nav>Навигации с помощью выпадающих меню
В навигации может содержать выпадающий из Выпадающий компонент. Просто добавьте .uk-dropdown-navbar модификатор в dropdown, поэтому она отлично вписывается в навигации дизайн.
