UIkit3.x文档

子导航

为子导航定义各种样式。

用法

要应用此组件，请使用以下class。要对齐子导航，例如使其水平居中，可以使用Flex 组件。

Class Description
.uk-subnav 添加到<ul>元素中定义子导航组件。使用<a>元素作为导航列表中的导航项。
.uk-active 添加到列表项以应用活动状态。

要添加没有链接的列表项，请使用<span>元素而不是<a>。还可以将.uk-disabledclass添加到<li>元素来禁用<a>元素，这样会从锚点中移除href属性，使其无法通过键盘导航选中它。

<ul class="uk-subnav">
    <li class="uk-active"><a href=""></a></li>
    <li><a href=""></a></li>
    <li><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><span>Disabled</span></li>
</ul>

Note为了更好的布局效果，如果导航单元要换到下一行，可以添加Margin 组件中的uk-margin 属性。

分隔线

添加.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>

胶囊效果

添加.uk-subnav-pill class可以添加背景来突出显示活动菜单项。

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