跳到主要内容

文档

导航

定义列表导航的不同样式。

用法

要应用此组件，请使用以下类。

类 描述
.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>

注意 默认情况下，导航没有样式。这就是为什么添加修饰符类很重要。在我们的示例中，我们使用 .uk-nav-default 类。

嵌套导航

将 .uk-parent 类添加到项目以将其变成父级。将 .uk-nav-sub 类添加到项目内的 <ul> 元素以创建子导航。

<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 类，因此您不必手动应用它。

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

标题和分隔线

将以下类之一添加到列表项以创建标题或项目之间的分隔线。

元素 描述
.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-default 类以使导航具有默认样式。您可以将导航放置在卡片或内容中的任何其他位置。

<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>
        <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></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>
        <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 类以使导航具有更明显的样式，例如当将其放置在模态框中时。

<ul class="uk-nav uk-nav-primary">…</ul>
  • <div class="uk-width-1-2@s">
    <ul class="uk-nav-primary" 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></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>
        <li><a href="#">Item</a></li>
    </ul>
</div>

辅助修饰符

如果导航有副标题，则添加 .uk-nav-secondary 类以获得额外的样式。

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

居中修饰符

将 .uk-nav-center 类添加到居中导航项。这可以与默认和主要样式修饰符结合使用。

<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>
        <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-divider 类以用线分隔导航项。这可以与默认、主要和辅助样式修饰符结合使用。

<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-nav-medium 添加此类以应用中等大小的主要导航。
.uk-nav-large 添加此类以应用大尺寸的主要导航。
.uk-nav-xlarge 添加此类以应用超大尺寸的主要导航。 
<ul class="uk-nav uk-nav-primary uk-nav-large">…</ul>
  • <div class="uk-width-1-2@s">
    <ul class="uk-nav-primary uk-nav-large" uk-nav>
        <li class="uk-active"><a href="#">Active</a></li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
    </ul>
</div>

添加 .uk-dropdown-nav 类以将导航放置在来自 下拉列表组件 的默认下拉列表中。

<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 类以将导航放置在来自 导航栏组件 的导航栏下拉列表中。

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

导航可以在来自 画布组件 的画布中使用。不需要添加修饰符类。

  • 打开 
  • <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>

组件选项

任何这些选项都可以应用于组件属性。用分号分隔多个选项。 了解更多

选项 值 默认 描述
targets CSS 选择器 > .uk-parent 要切换的元素。
toggle CSS 选择器 > a 切换元素。
content CSS 选择器 > ul 内容元素。
collapsible 布尔值 true 允许所有项目关闭。
multiple 布尔值 false 允许多个打开的项目。
transition 字符串 ease 要使用的过渡。
animation 布尔值，字符串 true 动画 的空格分隔名称。用逗号分隔表示动画结束。
duration 数字 200 动画持续时间（以毫秒为单位）。

JavaScript

了解更多关于 JavaScript 组件。

初始化

UIkit.nav(element, options);

方法

以下方法可用于该组件

切换

UIkit.nav(element).toggle(index, animate);

切换内容窗格。

名称 类型 默认 描述
index 字符串，数字，节点 0 要切换的导航窗格。从 0 开始的索引。
animate 布尔值 true 通过传递 false 来抑制打开动画。