UIkit3.x文档

导航菜单

为列表导航菜单定义各种样式。

用法

要应用此组件，请使用以下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>即可。

Note 该属性会自动添加.uk-nav，因此您无需再手动添加。

<ul uk-nav>…</ul>
  • <div class="uk-width-1-2@s uk-width-2-5@m">
            <ul class="uk-nav-default" 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>

父级图标

要创建父图标，只需将uk-nav-parent-icon属性添加到<span>元素。

<ul uk-nav>
            <li>
                <a href="">Parent <span uk-nav-parent-icon></span></a>
                …
            </li>
        </ul>
  • <div class="uk-width-1-2@s uk-width-2-5@m">
            <ul class="uk-nav-default" uk-nav>
                <li class="uk-active"><a href="#">Active</a></li>
                <li class="uk-parent">
                    <a href="#">Parent <span uk-nav-parent-icon></span></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 <span uk-nav-parent-icon></span></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-subtitle类添加到div元素以创建带字幕的项目。

<ul class="uk-nav">
            <li>
                <a href="">
                    <div>
                        Item
                        <div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do.</div>
                    </div>
                </a>
            </li>
        </ul>

默认样式

添加..uk-nav-defaultclass给导航应用默认样式。你可以把导航放在卡片内或者容器中的任何位置。

<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-secondary该类以具有额外的样式。

<ul class="uk-nav uk-nav-secondary">…</ul>

居中

将.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-nav-dividerclass可以以用行分隔导航中的项目。可以与nav组件的默认样式uk-nav-default和增强样式uk-nav-primary以及次要样式结合起来使用。

<ul class="uk-nav uk-nav-default uk-nav-divider">...</ul>
  • <div class="uk-width-1-2@s">
    <ul class="uk-nav-default uk-nav-divider" 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样式。

  • Open 
  • <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

了解更多关于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来禁止打开动画。