跳至主要内容

文档

Dropnav

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

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

用法

Dropnav 组件包含许多切换按钮及其相关下拉菜单。将 uk-dropnav 属性添加到包含切换按钮的列表元素或其父容器元素。使用 下拉菜单组件，方法是在下拉菜单中添加 .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>

在这个例子中，我们使用了 子导航组件。

  • <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 项目下方，并向左对齐。要更改对齐方式，请将 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 选项。在以下示例中，下拉菜单与 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>

父级图标

要创建父级图标，只需使用 下拉组件 并将 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>

Dropnav 和选项卡

Dropnav 可以轻松应用于 选项卡组件。

<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 行为。
dropbar-anchor CSS 选择器 false 如果设置，Dropbar 将插入锚元素之后。
stretch 布尔值，字符串 false 在两个轴上 (true) 或给定轴 (x, y) 上拉伸下拉菜单。
mode 字符串 click, hover 下拉菜单触发行为模式的逗号分隔列表 (click, hover)。
delay-show 数字 0 悬停模式下显示下拉菜单之前的延迟时间，以毫秒为单位。
delay-hide 数字 800 悬停模式下隐藏下拉菜单之前的延迟时间，以毫秒为单位。
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 在隐藏项目之后触发。

无障碍性

Dropnav 组件符合 披露导航菜单 WAI-ARIA 设计模式，并自动设置适当的 WAI-ARIA 状态和属性。

键盘交互

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

国际化

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

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