跳到主要内容

文档

Subnav

为子导航定义不同的样式。

用法

要应用该组件，请使用以下类。要对齐子导航，例如让它水平居中，可以使用 Flex 组件。

类 说明
.uk-subnav 将该类添加到一个 <ul> 元素上，以定义 Subnav 组件。在列表内使用 <a> 元素作为导航项。
.uk-active 将该类添加到一个列表项上以应用激活状态。
.uk-disabled 将该类添加到一个列表项上以应用禁用状态，并使用 <span> 元素代替 <a> 元素。 
<ul class="uk-subnav">
    <li class="uk-active"><a href=""></a></li>
    <li><a href=""></a></li>
    <li class="uk-disable"><span></span></li>
</ul>
<ul class="uk-subnav" uk-margin>
    <li class="uk-active"><a href="#">Active</a></li>
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
    <li class="uk-disable"><span>Disabled</span></li>
</ul>

注意 为了获得更好的布局，如果项目需要换行到下一行，请添加 Margin 组件的 uk-margin 属性。

Divider 修饰符

添加 .uk-subnav-divider 类，用线条分隔菜单项。

<ul class="uk-subnav uk-subnav-divider">…</ul>
<ul class="uk-subnav uk-subnav-divider" uk-margin>
    <li class="uk-active"><a href="#">Active</a></li>
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
</ul>

Pill 修饰符

添加 .uk-subnav-pill 类，用背景色突出显示激活的菜单项。

<ul class="uk-subnav uk-subnav-pill">…</ul>
<ul class="uk-subnav uk-subnav-pill" uk-margin>
    <li class="uk-active"><a href="#">Active</a></li>
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
</ul>

你还可以在子导航中使用 Dropdown 组件的下拉菜单。

<ul class="uk-subnav">
    <li>

        <!-- This is the menu item toggling the dropdown -->
        <a href=""></a>

        <!-- This is the dropdown -->
        <div uk-dropdown="mode: click">
            <ul class="uk-nav uk-dropdown-nav">…</ul>
        </div>

    </li>
</ul>
<ul class="uk-subnav uk-subnav-pill" uk-margin>
    <li class="uk-active"><a href="#">Active</a></li>
    <li><a href="#">Item</a></li>
    <li>
        <a href>More <span uk-icon="icon: triangle-down"></span></a>
        <div uk-dropdown="mode: click">
            <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>
    </li>
</ul>