跳到主要内容

文档

Dropnav

为任意导航创建下拉菜单。

Dropnav 组件会用相同的选项初始化导航中的所有下拉菜单，因此不必逐个初始化。dropnav 内的所有下拉菜单都具备瞄准感知能力。这意味着只要鼠标指针朝下拉菜单方向移动，它就会保持打开状态。额外的延迟还能确保即使鼠标指针短暂移向别的方向，下拉菜单也不会关闭。在悬停模式下，如果悬停到另一个菜单项，下拉菜单会立即关闭。

用法

Dropnav 组件由若干切换项及其关联的下拉菜单组成。为包含这些切换项的列表元素或其父容器元素添加 uk-dropnav 属性。然后使用 Dropdown 组件：为下拉菜单添加 .uk-dropdown 类，为下拉菜单内的导航添加 .uk-dropdown-nav 类。

Dropnav 的切换项由其他组件提供样式，下面会展示其中一部分。

<ul uk-dropnav>
    <li>
        <a href=""></a>
        <div class="uk-dropdown">
            <ul class="uk-nav uk-dropdown-nav">…</ul>
        </div>
    </li>
</ul>

在本例中，我们使用了 Subnav 组件。

<nav uk-dropnav>
    <ul class="uk-subnav">
        <li class="uk-active"><a href="#">Active</a></li>
        <li>
            <a href>Parent <span uk-drop-parent-icon></span></a>
            <div class="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><a href="#">Item</a></li>
                </ul>
            </div>
        </li>
        <li>
            <a href>Parent <span uk-drop-parent-icon></span></a>
            <div class="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><a href="#">Item</a></li>
                </ul>
            </div>
        </li>
        <li><a href="#">Item</a></li>
    </ul>
</nav>

Dropbar

dropbar 会延伸到 dropnav 的全部宽度，并在显示下拉菜单时去掉其默认样式。要将下拉菜单放入这样的 dropbar 中，为 uk-dropnav 添加 dropbar: true 选项。还可以使用 dropbar-anchor 选项来指定 dropbar 会被注入到标记中哪个元素的后面。

<nav uk-dropnav="dropbar: true">…</nav>
<nav uk-dropnav="dropbar: true">

    <ul class="uk-subnav">
        <li class="uk-active"><a href="#">Active</a></li>
        <li>
            <a href>Item</a>
            <div class="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>
        </li>
        <li>
            <a href>Item</a>
            <div class="uk-dropdown uk-width-large">
                <div class="uk-child-width-1-2" uk-grid>
                    <div>
                        <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>
                    <div>
                        <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>
                </div>
            </div>
        </li>
    </ul>

</nav>

点击模式

dropnav 中的父级项目可以通过悬停或点击切换项来打开。只需为 uk-dropnav 属性添加 mode: click 选项。

<nav uk-dropnav="mode: click">…</nav>
<nav uk-dropnav="mode: click">
    <ul class="uk-subnav">
        <li class="uk-active"><a href="#">Active</a></li>
        <li>
            <a href>Parent <span uk-drop-parent-icon></span></a>
            <div class="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><a href="#">Item</a></li>
                </ul>
            </div>
        </li>
        <li>
            <a href>Parent <span uk-drop-parent-icon></span></a>
            <div class="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><a href="#">Item</a></li>
                </ul>
            </div>
        </li>
        <li><a href="#">Item</a></li>
    </ul>
</nav>

对齐

默认情况下，下拉菜单定位在 dropbar 项目下方，并左对齐。要改变对齐方式，为 uk-dropbar 属性设置 align 选项。

位置 描述
left 下拉菜单左对齐。
right 下拉菜单右对齐。
center 下拉菜单居中对齐。 
<nav uk-dropbar="align: center">…</nav>
<nav uk-dropnav="align: center">
    <ul class="uk-subnav uk-flex-center">
        <li class="uk-active"><a href="#">Active</a></li>
        <li>
            <a href>Parent <span uk-drop-parent-icon></span></a>
            <div class="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><a href="#">Item</a></li>
                </ul>
            </div>
        </li>
        <li>
            <a href>Parent <span uk-drop-parent-icon></span></a>
            <div class="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><a href="#">Item</a></li>
                </ul>
            </div>
        </li>
        <li><a href="#">Item</a></li>
    </ul>
</nav>

目标元素

默认情况下，下拉菜单对齐到各自的切换项。要将下拉菜单定位到另一个元素，只需为 uk-dropbar 属性添加 target: SELECTOR 选项。

<nav uk-dropbar="target: !.uk-section">…</nav>
<div class="uk-section uk-section-muted uk-section-small">
    <nav uk-dropnav="target: !.uk-section; align: center">

        <ul class="uk-subnav">
            <li class="uk-active"><a href="#">Active</a></li>
            <li>
                <a href>Parent</a>
                <div class="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>
            </li>
            <li>
                <a href>Parent</a>
                <div class="uk-dropdown uk-width-large">
                    <div class="uk-child-width-1-2" uk-grid>
                        <div>
                            <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>
                        <div>
                            <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>
                    </div>
                </div>
            </li>
        </ul>

    </nav>
</div>

拉伸

要拉伸下拉菜单，使用 Drop 组件 及其 stretch 选项。在下面的示例中，下拉菜单对齐到 dropnav 的边界。

<nav uk-dropnav="boundary: true; stretch: x; flip: false">…</nav>
<nav uk-dropnav="boundary: true; stretch: x; flip: false">

    <ul class="uk-subnav">
        <li class="uk-active"><a href="#">Active</a></li>
        <li>
            <a href>Parent</a>
            <div class="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>
        </li>
        <li>
            <a href>Parent</a>
            <div class="uk-dropdown">
                <div class="uk-child-width-1-2" uk-grid>
                    <div>
                        <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>
                    <div>
                        <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>
                </div>
            </div>
        </li>
    </ul>

</nav>

父级图标

要创建父级图标，只需使用 Drop 组件，并为 <span> 元素添加 uk-drop-parent-icon 属性。

<ul uk-dropnav>
    <li>
        <a href="">Parent <span uk-drop-parent-icon></span></a>
        <div class="uk-dropdown">…</div>
    </li>
</ul>
<nav uk-dropnav>
    <ul class="uk-subnav">
        <li class="uk-active"><a href="#">Active</a></li>
        <li>
            <a href>Parent <span uk-drop-parent-icon></span></a>
            <div class="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><a href="#">Item</a></li>
                </ul>
            </div>
        </li>
        <li>
            <a href>Parent <span uk-drop-parent-icon></span></a>
            <div class="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><a href="#">Item</a></li>
                </ul>
            </div>
        </li>
        <li><a href="#">Item</a></li>
    </ul>
</nav>

Dropnav 与 tab

dropnav 可以很方便地应用到 Tab 组件 上。

<nav uk-dropnav>
    <ul class="uk-tab">…</ul>
<nav>
<nav uk-dropnav>
    <ul class="uk-tab">
        <li class="uk-active"><a href="#">Active</a></li>
        <li>
            <a href>Parent <span uk-drop-parent-icon></span></a>
            <div class="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><a href="#">Item</a></li>
                </ul>
            </div>
        </li>
        <li>
            <a href>Parent <span uk-drop-parent-icon></span></a>
            <div class="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><a href="#">Item</a></li>
                </ul>
            </div>
        </li>
        <li><a href="#">Item</a></li>
    </ul>
</nav>

组件选项

以下任意选项都可以应用到组件属性上。多个选项之间用分号分隔。了解更多

选项 值 默认值 描述
align String left 下拉菜单对齐方式（left、right、center）。
dropbar Boolean false 启用或禁用 dropbar 行为。
dropbar-anchor CSS selector false 如果设置，dropbar 将被插入到锚点元素之后。
stretch Boolean, String false 在两个方向（true）或指定轴（x、y）上拉伸下拉菜单。
mode String click, hover 逗号分隔的下拉菜单触发行为模式列表（click、hover）。
delay-show Number 0 悬停模式下显示下拉菜单前的延迟时间，单位为毫秒。
delay-hide Number 800 悬停模式下隐藏下拉菜单前的延迟时间，单位为毫秒。
boundary CSS selector true 下拉菜单不能超出的区域，超出时会翻转和位移。默认是最近的滚动祖先元素。
target Boolean, CSS selector false 下拉菜单所定位到的元素（true 表示窗口）。
target-x Boolean, CSS selector false 下拉菜单在 X 轴上定位到的元素（true 表示窗口）。
target-y Boolean, CSS selector false 下拉菜单在 Y 轴上定位到的元素（true 表示窗口）。
offset Number 0 下拉菜单的偏移量。
animation String uk-animation-fade 以空格分隔的动画名称。以逗号分隔表示关闭时的动画。
animate-out Boolean false 关闭下拉菜单时使用动画。
bg-scroll Boolean true 下拉菜单打开时允许背景滚动。
close-on-scroll Boolean false 滚动父级滚动容器时关闭下拉菜单。
duration Number 200 动画时长。
container Boolean false 通过选择器指定目标容器，以确定下拉菜单应被附加到 DOM 中的位置。

JavaScript

了解关于 JavaScript 组件 的更多内容。

初始化

UIkit.dropnav(element, options);

事件

以下事件会在绑定了该组件的元素上触发：

名称 描述
beforeshow 在项目被显示之前触发。可以通过在事件上调用 preventDefault() 阻止显示。
show 在项目被显示之后触发。
shown 在项目的显示动画完成之后触发。
beforehide 在项目被隐藏之前触发。可以通过在事件上调用 preventDefault() 阻止隐藏。
hide 在项目的隐藏动画开始之后触发。
hidden 在项目被隐藏之后触发。

可访问性

Dropnav 组件遵循 Disclosure Navigation Menu WAI-ARIA 设计模式，并会自动设置合适的 WAI-ARIA 状态和属性。

键盘交互

可以通过以下按键使用键盘访问 Dropnav 组件。

国际化

Toggle Item 组件使用以下翻译字符串。了解关于 翻译组件 的更多内容。

键 默认值 描述
label Open Menu aria-label 属性。