导航栏
定义导航栏的不同样式。
用法
导航栏组件由导航栏本身和一个或多个导航组成。
| 类 | 描述 |
|---|---|
.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 附加到切换。例如，您可以从侧边栏组件添加侧边栏导航。
| 类 | 描述 |
|---|---|
.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>响应式可见性
要隐藏或显示某些导航栏项目，只需从实用工具组件添加一个响应式可见性类。 如果您想使用切换来触发移动导航，这将非常方便。
示例
调整浏览器窗口大小以查看效果。
标记
<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>注意 在此示例中，我们从 侧边栏组件添加了一个侧边栏。
修饰符
要以不同的样式显示导航栏，只需添加修饰符类。 这些修饰符可以相互组合
附加的导航栏
添加 .uk-navbar-attached 类以优化导航栏的样式，使其附加到视口的顶部。 例如，将删除圆角。
示例
标记
<nav class="uk-navbar uk-navbar-attached">...</nav>带有下拉菜单的导航栏
导航栏可以包含来自下拉菜单组件的下拉菜单。只需将 .uk-dropdown-navbar 修饰符添加到下拉菜单，使其完美地融入导航栏的样式。
