Nav
为列表导航定义不同的样式。
用法
要应用此组件，请将 .uk-nav 类添加到 <ul> 元素。在列表中使用 <a> 元素作为菜单项。要将活动状态应用于菜单项，只需添加 .uk-active 类即可。
示例
注意 默认情况下，nav 没有样式。这就是为什么添加一个修饰符类来赋予它一些样式很重要。在我们的示例中，我们使用了 .uk-nav-side 类。
标记
<ul class="uk-nav">
<li><a href="#">...</a></li>
<li class="uk-active"><a href="#">...</a></li>
</ul>
嵌套的导航
您可以轻松地向您的导航添加任意数量的 <ul> 元素。
| 类 | 描述 |
|---|---|
.uk-nav-sub |
将此类添加到第一个嵌套的 <ul> 以优化间距。 |
.uk-parent |
添加此类以指示父菜单项。 |
.uk-nav-parent-icon |
将此类添加到导航以添加指示父项的图标。 |
示例
标记
<ul class="uk-nav uk-nav-parent-icon">
<li class="uk-parent"><a href="#">...</a>
<ul class="uk-nav-sub">
<li><a href="#">...</a>
<ul>...</ul>
</li>
</ul>
</li>
</ul>手风琴
默认情况下，子菜单项始终可见。要应用手风琴效果，只需将 data-uk-nav 属性添加到主 <ul>。当点击父项时，一个打开的项将关闭，一次只允许一个打开的嵌套列表。要避免此行为，只需将 {multiple:true} 附加到 data 属性即可。
示例
data-uk-nav
data-uk-nav="{multiple:true}"
标记
<ul class="uk-nav uk-nav-parent-icon" data-uk-nav>
<li class="uk-parent">
<a href="#">...</a>
<ul class="uk-nav-sub">
<li><a href="#">...</a></li>
<li><a href="#">...</a></li>
</ul>
</li>
</ul><ul class="uk-nav uk-nav-parent-icon" data-uk-nav="{multiple:true}">
<li class="uk-parent">
<a href="#">...</a>
<ul class="uk-nav-sub">
<li><a href="#">...</a></li>
<li><a href="#">...</a></li>
</ul>
</li>
</ul>标题和分隔符
将以下类之一添加到列表项以创建标题或项目之间的分隔符。
| 类 | 描述 |
|---|---|
.uk-nav-header |
将此类添加到 <li> 元素以创建标题。 |
.uk-nav-divider |
将此类添加到 <li> 元素以创建分隔菜单项的分隔符。 |
注意 您还可以向导航项添加副标题。只需在列表项中的 <a> 元素内创建一个 <div> 元素即可。
示例
标记
<li class="uk-nav-header">...</li>
<li class="uk-nav-divider"></li>样式修饰符
有几种修饰符可以根据 nav 的使用上下文来设置 nav 的样式。
侧边导航
添加 .uk-nav-side 类以将导航放置在侧边栏、面板或内容的任何其他位置。
示例
面板中的侧边导航
标记
<div class="uk-panel uk-panel-box">
<h3 class="uk-panel-title">...</h3>
<ul class="uk-nav uk-nav-side">...</ul>
</div>
下拉导航
添加 .uk-nav-dropdown 类以将导航放置在 下拉菜单组件 的默认下拉菜单中。
示例
标记
<div class="uk-dropdown">
<ul class="uk-nav uk-nav-dropdown">...</ul>
</div>
导航栏导航
添加 .uk-nav-navbar 类以将导航放置在 导航栏组件 的导航栏下拉菜单中。
示例
标记
<div class="uk-dropdown uk-dropdown-navbar">
<ul class="uk-nav uk-nav-navbar">...</ul>
</div>
侧边栏导航
添加 .uk-nav-offcanvas 类以将导航放置在 侧边栏组件 的侧边栏中。
示例
标记
<div class="uk-offcanvas-bar">
<ul class="uk-nav uk-nav-offcanvas">...</ul>
</div>
