为列表导航菜单定义各种样式。
要应用此组件,请使用以下class。
Class | Description |
---|---|
.uk-nav |
添加到<ul> 元素中定义导航菜单组件。将
<a> 元素用作列表中的导航项。
|
.uk-active |
添加到列表项应用活动状态效果。 |
<ul class="uk-nav">
<li class="uk-active"><a href=""></a></li>
<li><a href=""></a></li>
</ul>
<div class="uk-width-1-2@s uk-width-2-5@m">
<ul class="uk-nav uk-nav-default">
<li class="uk-active"><a href="#">Active</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
</ul>
</div>
Note默认情况下,导航没有样式。因此添加修饰class非常重要。在示例中,我们使用了.uk-nav-default
class。
在导航单元上添加.uk-parent
class,使其变成父元素。在该元素内的
<ul>
上添加.uk-nav-sub
创建子级导航。
<ul class="uk-nav">
<li class="uk-parent">
<a href=""></a>
<ul class="uk-nav-sub">
<li><a href=""></a></li>
<li>
<a href=""></a>
<ul>...</ul>
</li>
</ul>
</li>
</ul>
<div class="uk-width-1-2@s uk-width-2-5@m">
<ul class="uk-nav uk-nav-default">
<li class="uk-active"><a href="#">Active</a></li>
<li class="uk-parent">
<a href="#">Parent</a>
<ul class="uk-nav-sub">
<li><a href="#">Sub item</a></li>
<li>
<a href="#">Sub item</a>
<ul>
<li><a href="#">Sub item</a></li>
<li><a href="#">Sub item</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
默认情况下,子菜单项始终可见状态。要应用手风琴效果,只需将uk-nav
属性添加到主<ul>
即可。要指示父级项还可以添加.uk-nav-parent-icon
class为父级项应用图标。
Note 该属性会自动添加.uk-nav
,因此您无需再手动添加。
<ul class="uk-nav-parent-icon" uk-nav>...</ul>
<div class="uk-width-1-2@s uk-width-2-5@m">
<ul class="uk-nav-default uk-nav-parent-icon" uk-nav>
<li class="uk-active"><a href="#">Active</a></li>
<li class="uk-parent">
<a href="#">Parent</a>
<ul class="uk-nav-sub">
<li><a href="#">Sub item</a></li>
<li>
<a href="#">Sub item</a>
<ul>
<li><a href="#">Sub item</a></li>
<li><a href="#">Sub item</a></li>
</ul>
</li>
</ul>
</li>
<li class="uk-parent">
<a href="#">Parent</a>
<ul class="uk-nav-sub">
<li><a href="#">Sub item</a></li>
<li><a href="#">Sub item</a></li>
</ul>
</li>
</ul>
</div>
点击父级导航时,在展开它下面子级导航的同时会将其他地方已展开的子菜单关闭,即同时刻只允许展开一个嵌套的列表。如需要同时展开多个子级导航,需要为属性添加multiple: true
选项。
<ul class="uk-nav-parent-icon" uk-nav="multiple: true">...</ul>
<div class="uk-width-1-2@s uk-width-2-5@m">
<ul class="uk-nav-default uk-nav-parent-icon" uk-nav="multiple: true">
<li class="uk-active"><a href="#">Active</a></li>
<li class="uk-parent">
<a href="#">Parent</a>
<ul class="uk-nav-sub">
<li><a href="#">Sub item</a></li>
<li>
<a href="#">Sub item</a>
<ul>
<li><a href="#">Sub item</a></li>
<li><a href="#">Sub item</a></li>
</ul>
</li>
</ul>
</li>
<li class="uk-parent">
<a href="#">Parent</a>
<ul class="uk-nav-sub">
<li><a href="#">Sub item</a></li>
<li><a href="#">Sub item</a></li>
</ul>
</li>
</ul>
</div>
将以下class添加到列表项,来创建标题和项目之间的分隔符。
Element | Description |
---|---|
.uk-nav-header |
添加到<li> 创建标题 |
.uk-nav-divider |
添加到<li> 元素创建项目之间的分割线 |
<li class="uk-nav-header"></li>
<li class="uk-nav-divider"></li>
<div class="uk-width-1-2@s uk-width-2-5@m">
<ul class="uk-nav uk-nav-default">
<li class="uk-nav-header">Header</li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#">Item</a></li>
</ul>
</div>
添加..uk-nav-default
class给导航应用默认样式。你可以把导航放在卡片内或者内容里的任何位置。
<ul class="uk-nav uk-nav-default">...</ul>
<div class="uk-card uk-card-default uk-card-body uk-width-1-2@s">
<ul class="uk-nav-default uk-nav-parent-icon" uk-nav>
<li class="uk-active"><a href="#">Active</a></li>
<li class="uk-parent">
<a href="#">Parent</a>
<ul class="uk-nav-sub">
<li><a href="#">Sub item</a></li>
<li><a href="#">Sub item</a></li>
</ul>
</li>
<li class="uk-parent">
<a href="#">Parent</a>
<ul class="uk-nav-sub">
<li><a href="#">Sub item</a></li>
<li><a href="#">Sub item</a></li>
</ul>
</li>
<li class="uk-nav-header">Header</li>
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
</ul>
</div>
添加.uk-nav-primary
class使导航具有更独特的样式,例如将其放在模态对话框中时。
<ul class="uk-nav uk-nav-primary">...</ul>
<div class="uk-width-1-2@s">
<ul class="uk-nav-primary uk-nav-parent-icon" uk-nav>
<li class="uk-active"><a href="#">Active</a></li>
<li class="uk-parent">
<a href="#">Parent</a>
<ul class="uk-nav-sub">
<li><a href="#">Sub item</a></li>
<li><a href="#">Sub item</a></li>
</ul>
</li>
<li class="uk-parent">
<a href="#">Parent</a>
<ul class="uk-nav-sub">
<li><a href="#">Sub item</a></li>
<li><a href="#">Sub item</a></li>
</ul>
</li>
<li><a href="#">Item</a></li>
</ul>
</div>
将.uk-nav-center
class添加到导航项使其居中,可以与默认样式和增强样式结合使用。
<ul class="uk-nav uk-nav-default uk-nav-center">...</ul>
<div class="uk-card uk-card-default uk-card-body uk-width-1-2@s">
<ul class="uk-nav-default uk-nav-center uk-nav-parent-icon" uk-nav>
<li class="uk-active"><a href="#">Active</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
</ul>
</div>
添加.uk-dropdown-nav
class 以将导航菜单放入 Dropdown 组件的下拉列表中。
<div uk-dropdown>
<ul class="uk-nav uk-dropdown-nav">...</ul>
</div>
<button class="uk-button uk-button-default" type="button">Hover</button>
<div uk-dropdown>
<ul class="uk-nav uk-dropdown-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li><a href="#">Item</a></li>
<li class="uk-nav-header">Header</li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#">Item</a></li>
</ul>
</div>
添加 .uk-navbar-dropdown-nav
class,将导航放在 Navbar
组件的下拉菜单中。
<div class="uk-navbar-dropdown">
<ul class="uk-nav uk-navbar-dropdown-nav">...</ul>
</div>
<nav class="uk-navbar-container" uk-navbar>
<div class="uk-navbar-left">
<ul class="uk-navbar-nav">
<li>
<a href="#">Parent</a>
<div class="uk-navbar-dropdown">
<ul class="uk-nav uk-navbar-dropdown-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li><a href="#">Item</a></li>
<li class="uk-nav-header">Header</li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#">Item</a></li>
</ul>
</div>
</li>
</ul>
</div>
</nav>
可以在Off-canvas 组件的抽屉内直接使用,无需额外添加class样式。
<a href="#offcanvas-slide" class="uk-button uk-button-default" uk-toggle>Open</a>
<div id="offcanvas-slide" uk-offcanvas>
<div class="uk-offcanvas-bar">
<ul class="uk-nav uk-nav-default">
<li class="uk-active"><a href="#">Active</a></li>
<li><a href="#">Item</a></li>
<li class="uk-nav-header">Header</li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#">Item</a></li>
</ul>
</div>
</div>
下列选项中的任何一个都可以应用于组件属性。用分号分隔多个选项。了解更多
Option | Value | Default | Description |
---|---|---|---|
targets |
CSS selector | > .uk-parent |
添加此class 到切换子菜单的元素 |
toggle |
CSS selector | > a |
用于切换子菜单的元素 |
content |
CSS selector | > ul |
内容元素 |
collapsible |
Boolean | true |
允许收缩所有菜单 |
multiple |
Boolean | false |
允许同时展开多个菜单 |
transition |
String | ease |
使用过渡效果。 |
animation |
String | true |
用空格隔开多个动画的名称。逗号后是隐藏元素时淡出效果的动画 |
duration |
Number | 200 |
动画持续时间(以毫秒为单位)。 |
了解更多关于JavaScript 组件的信息。
UIkit.nav(element, options);
以下方法可用于该组件:
UIkit.nav(element).toggle(index, animate);
切换内容窗格。
Name | Type | Default | Description |
---|---|---|---|
index |
String, Integer, Node | 0 | 导航窗格进行切换。从0开始的索引。 |
animate |
Boolean | true | 通过传递false来禁止打开动画。 |