跳转到主要内容

文档

下拉导航

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

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

用法

下拉导航组件由多个切换按钮及其相关的下拉菜单组成。将 uk-dropnav 属性添加到包含切换按钮的列表元素或其父容器元素。通过向下拉菜单添加 .uk-dropdown 类，以及向下拉菜单内的导航添加 .uk-dropdown-nav 类来使用 下拉菜单组件。

下拉导航切换按钮通过其他组件进行样式设置，其中一些将在此处显示。

<ul uk-dropnav>
    <li>
        <a href=""></a>
        <div class="uk-dropdown">
            <ul class="uk-nav uk-dropdown-nav">…</ul>
        </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>

下拉栏

下拉栏会扩展到下拉导航的整个宽度，并显示下拉菜单，而无需其默认样式。要将下拉菜单放置在这样的下拉栏中，请向 uk-dropnav 添加 dropbar: true 选项。或者，使用 dropbar-anchor 选项来选择将下拉栏插入标记后的元素。

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

点击模式

可以通过悬停或点击切换按钮来启用下拉导航内的父级项。只需将 mode: click 选项添加到 uk-dropnav 属性。

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

对齐

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

定位 描述
左对齐 将下拉菜单左对齐。
右对齐 将下拉菜单右对齐。
居中对齐 将下拉菜单居中对齐。 
<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>

拉伸

要拉伸下拉菜单，请使用 下拉组件及其 stretch 选项。在下面的示例中，下拉菜单与下拉导航的边界对齐。

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

父级图标

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

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

下拉导航和选项卡

下拉导航可以轻松应用于 选项卡组件。

<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 字符串 左对齐 下拉菜单对齐方式 (left, right, center)。
dropbar 布尔值 false 启用或禁用下拉栏行为。
dropbar-anchor CSS 选择器 false 如果设置，下拉栏将在锚元素之后插入。
stretch 布尔值、字符串 false 在两个轴（true）或给定轴 (x, y) 上拉伸下拉菜单。
mode 字符串 click, hover 逗号分隔的下拉菜单触发行为模式列表 (click, hover)。
delay-show 数字 0 在悬停模式下，下拉菜单在 ms 中显示之前的延迟时间。
delay-hide 数字 800 在悬停模式下，下拉菜单在 ms 中隐藏之前的延迟时间。
boundary CSS 选择器 true 下拉菜单不能超过的区域，导致其翻转和移动。默认情况下，为最近的可滚动祖先。
target 布尔值、CSS 选择器 false 下拉菜单定位到的元素 (true 表示窗口)。
target-x 布尔值、CSS 选择器 false 下拉菜单定位到的元素的 X 轴 (true 表示窗口)。
target-y 布尔值、CSS 选择器 false 下拉菜单定位到的元素的 Y 轴 (true 表示窗口)。
offset 数字 0 下拉菜单偏移量。
animation 字符串 uk-animation-fade 空格分隔的动画名称。 逗号分隔的动画输出。
animate-out 布尔值 false 关闭下拉菜单时使用动画。
bg-scroll 布尔值 true 在下拉菜单打开时允许背景滚动。
close-on-scroll 布尔值 false 在滚动父滚动容器时关闭下拉菜单。
duration 数字 200 动画持续时间。
container 布尔值 false 通过选择器定义目标容器，以指定应将下拉菜单附加到 DOM 中的哪个位置。

JavaScript

了解更多关于 JavaScript 组件的信息。

初始化

UIkit.dropnav(element, options);

事件

以下事件将在附加此组件的元素上触发

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

无障碍访问

下拉导航组件遵循 Disclosure Navigation Menu WAI-ARIA 设计模式，并自动设置适当的 WAI-ARIA 状态和属性。

键盘交互

可以使用以下按键通过键盘访问下拉导航组件。

国际化

切换项组件使用以下翻译字符串。了解更多关于翻译组件的信息。

键 默认值 描述
label 打开菜单 aria-label 属性。