Question

为二级导航设置不同的样式风格

用法

使用以下类名来应用这个组件。对齐一个二级导航，比如水平居中，你可以使用 Flex 组件。

Class	描述
.uk-subnav	添加此类名到 <ul> 元素中，并在列表内嵌 <a> 元素。
.uk-active	为列表条目添加此类名，使其呈现选中状态。
.uk-disabled	为列表条目添加此类名，使其呈现禁用状态。

Markup

<ul class="uk-subnav">
    <li class="uk-active"><a href="">...</a></li>
    <li><a href="">...</a></li>
    <li class="uk-disabled"><a href="">...</a></li>
</ul>

修饰

二级导航的分隔线

添加 .uk-subnav-line 类名，用线条将菜单条目分隔开。

Markup

<ul class="uk-subnav uk-subnav-line">
    <li>...</li>
</ul>

二级导航弹丸

添加 .uk-subnav-pill 类名，使选中状态的菜单条目拥有背景色。只需为菜单条目添加.uk-active 类名，就能让它呈现选中的状态。

Markup

<ul class="uk-subnav uk-subnav-pill">
    <li class="uk-active">...</li>
</ul>

带下拉菜单的二级导航

这个例子展示了如何使用带有 下拉菜单 的二级导航。

Markup

<ul class="uk-subnav">
    <li><a href="">...</a></li>
    <!-- 这是启用JavaScript的容器 -->
    <li data-uk-dropdown="{mode:'click'}">
<!-- 这是拨动下拉菜单的导航项 -->
<a href="">...</a>
<!-- 这是下拉菜单 -->
<div class="uk-dropdown uk-dropdown-small">
    <ul class="uk-nav uk-nav-dropdown">
<li><a href="">...</a></li>
    </ul>
</div>
    </li>
</ul>