跳到主要内容

文档

下拉菜单

定义可切换下拉菜单的不同样式。

下拉菜单组件具有目标感知功能。这意味着只要鼠标指针朝着下拉菜单移动，下拉菜单就会保持打开状态。额外的延迟确保即使鼠标指针在短时间内朝另一个方向移动，下拉菜单也会保持打开状态。如果鼠标悬停在另一个菜单项上，下拉菜单会立即关闭。

用法

下拉菜单是下拉的一个示例，它提供了自己的样式。任何内容（如按钮）都可以切换下拉菜单。只需将 uk-dropdown 属性添加到切换后面的块元素即可。

<button type="button"></button>
<div uk-dropdown></div>

可以通过悬停和单击切换来启用下拉菜单。只需将 mode: click 选项添加到属性，即可强制仅使用 click 模式。如果要将切换和下拉菜单分组，只需将 实用程序组件 中的 .uk-inline 类添加到两者周围的容器元素。

<div class="uk-inline">
    <button type="button"></button>
    <div uk-dropdown="mode: click"></div>
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<div class="uk-inline">
    <button class="uk-button uk-button-default" type="button">Hover</button>
    <div uk-dropdown>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>

<div class="uk-inline">
    <button class="uk-button uk-button-default" type="button">Click</button>
    <div uk-dropdown="mode: click">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>

下拉菜单可以包含导航组件中的导航。只需将 .uk-nav 类和 .uk-dropdown-nav 修饰符添加到 <ul> 元素即可。

<button type="button"></button>
<div uk-dropdown>
    <ul class="uk-nav uk-dropdown-nav">…</ul>
</div>
<button class="uk-button uk-button-default" type="button">Hover</button>
<div 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>

宽度和栅格

您可以将栅格组件中的栅格放置在下拉菜单中。只需使用 <div> 元素包装内容并添加 uk-grid 属性。如果栅格在下拉菜单不再适合其容器时应自动堆叠，只需添加 .uk-drop-grid 类即可。

<div class="uk-width-large" uk-dropdown>
    <div class="uk-drop-grid uk-child-width-1-2@m" uk-grid>…</div>
</div>

使用宽度组件中的类之一来调整下拉菜单的宽度。

<button class="uk-button uk-button-default" type="button">Hover</button>
<div class="uk-width-large" uk-dropdown>
    <div class="uk-drop-grid uk-child-width-1-2@m" 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>

大型修饰符

添加 .uk-dropdown-large 类，以获得具有较大内边距的下拉菜单。

<div class="uk-dropdown-large" uk-dropdown></div>
<div class="uk-inline">
    <button class="uk-button uk-button-default" type="button">Large</button>
    <div class="uk-dropdown-large" 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>
</div>

定位

默认情况下，下拉菜单位于切换下方。要更改其位置，请将 pos 选项设置为 uk-dropdown 属性。该值的第一个部分指的是下拉菜单的位置，而第二个部分定义其与切换的对齐方式。

定位 描述
top-left 将下拉菜单置于切换上方并将其与左侧对齐。
top-center 将下拉菜单置于切换上方并将其与中心对齐。
top-right 将下拉菜单置于切换上方并将其与右侧对齐。
bottom-left 将下拉菜单置于切换下方并将其与左侧对齐。
bottom-center 将下拉菜单置于切换下方并将其与中心对齐。
bottom-right 将下拉菜单置于切换下方并将其与右侧对齐。
left-top 将下拉菜单置于切换的左侧并将其与顶部对齐。
left-center 将下拉菜单置于切换的左侧并将其与中心对齐。
left-bottom 将下拉菜单置于切换的左侧并将其与底部对齐。
right-top 将下拉菜单置于切换的右侧并将其与顶部对齐。
right-center 将下拉菜单置于切换的右侧并将其与中心对齐。
right-bottom 将下拉菜单置于切换的右侧并将其与底部对齐。 
<div uk-dropdown="pos: top-left"></div>
<div class="uk-inline">
    <button class="uk-button uk-button-default" type="button">Top Right</button>
    <div uk-dropdown="pos: top-right">
        <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 class="uk-inline">
    <button class="uk-button uk-button-default" type="button">Bottom Center</button>
    <div uk-dropdown="pos: bottom-center">
        <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 class="uk-inline">
    <button class="uk-button uk-button-default" type="button">Right Top</button>
    <div uk-dropdown="pos: right-top">
        <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>

边界

默认情况下，如果下拉菜单超出视口或任何其他父滚动祖先，它会自动更改其位置。它将将其位置翻转到另一侧，以防止其覆盖切换，并将其对齐方式移动以适应视口。要设置与滚动祖先不同的边界，只需将 boundary: SELECTOR 选项添加到 uk-dropdown 属性，并使用边界的选择器。

<div class="my-class">
    <button type="button"></button>
    <div uk-dropdown="boundary: !.my-class"></div>
</div>
<div class="boundary uk-panel uk-placeholder uk-height-medium">

    <button class="uk-button uk-button-default uk-float-left" type="button">Bottom Right</button>
    <div uk-dropdown="pos: bottom-right; boundary: !.boundary">
        <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>

    <button class="uk-button uk-button-default uk-float-right" type="button">Bottom Left</button>
    <div uk-dropdown="pos: bottom-left; boundary: !.boundary">
        <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>

移动和翻转

要禁用自动移动和翻转，请将 shift: false 或 flip: false 选项添加到 uk-dropdown 属性。

<div uk-dropdown="shift: false; flip: false"></div>
<div class="boundary uk-panel uk-placeholder uk-height-medium">

    <button class="uk-button uk-button-default uk-float-left" type="button">Bottom Right</button>
    <div uk-dropdown="pos: bottom-right; boundary: !.boundary; shift: false; flip: false">
        <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>

    <button class="uk-button uk-button-default uk-float-right" type="button">Bottom Left</button>
    <div uk-dropdown="pos: bottom-left; boundary: !.boundary; shift: false; flip: false">
        <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>

自动更新

默认情况下，下拉菜单会在滚动时重新定位。要禁用动态定位，请将 auto-update: false 选项添加到 uk-dropdown 属性。下拉菜单仅在打开时定位一次。

<div uk-dropdown="auto-update: false"></div>

目标

默认情况下，下拉菜单与其切换对齐。要将下拉菜单定位到其他元素，只需将 target: SELECTOR 选项添加到 uk-dropdown 属性。要仅更改下拉菜单定位的一侧或与另一个元素的对齐方式，请使用 target-x: SELECTOR 或 target-y: SELECTOR。

<div class="my-class">
    <button type="button"></button>
    <div uk-dropdown="target: !.my-class"></div>
</div>
<div class="target uk-panel uk-placeholder uk-height-medium">

    <button class="uk-button uk-button-default uk-float-left" type="button">Bottom Left</button>
    <div uk-dropdown="pos: bottom-left; target: !.target">
        <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>

    <button class="uk-button uk-button-default uk-float-right" type="button">Bottom Right</button>
    <div uk-dropdown="pos: bottom-right; target: !.target">
        <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>

内嵌

默认情况下，下拉菜单位于切换外部。要将位置更改为内部，请将 inset: true 选项添加到 uk-dropdown 属性。仅当还设置了 target 选项时才应使用此选项，以使下拉菜单不会覆盖其切换。

<div uk-dropdown="target: .my-class; inset: true"></div>
<div class="target uk-panel uk-placeholder uk-height-large">

    <button class="uk-button uk-button-default uk-float-left" type="button">Bottom Left</button>
    <div uk-dropdown="pos: bottom-left; target: !.target; inset: true">
        <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>

    <button class="uk-button uk-button-default uk-float-right" type="button">Bottom Right</button>
    <div uk-dropdown="pos: bottom-right; target: !.target; inset: true">
        <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>

拉伸

要拉伸下拉菜单以填充其最近滚动祖先的大小，请将 stretch: true 选项添加到 uk-dropdown 属性。要仅拉伸到一个轴，请使用 stretch: x 或 stretch: y。如果设置了 boundary 选项，则下拉菜单会拉伸到定义的边界。

<div uk-dropdown="stretch: true"></div>
<nav class="uk-navbar-container" uk-navbar>
    <div class="uk-navbar-left">

        <ul class="uk-navbar-nav">
            <li>
                <a href>Hover</a>
                <div class="uk-navbar-dropdown" uk-dropdown="boundary: !.uk-navbar; stretch: x; flip: false">
                    <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>

    </div>
</nav>

动画

通过添加带有动画组件中类之一的 animation: uk-animation-* 选项，将一个或多个动画应用于下拉菜单。您还可以确定动画的持续时间。只需添加带有毫秒值的 duration 选项。设置 animate-out: true，以便在关闭下拉菜单时也显示动画。

<div uk-dropdown="animation: uk-animation-slide-top-small; duration: 1000"></div>
<button class="uk-button uk-button-default" type="button">Hover</button>
<div uk-dropdown="animation: uk-animation-slide-top-small; animate-out: true">
    <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>

或者，下拉组件具有动画组件未涵盖的两种其他动画类型。slide-* 动画从选定的方向滑动下拉菜单及其内容，而使用 reveal-* 动画，下拉菜单的内容保持静态并从选定的方向显示。

动画 描述
slide-top 从顶部滑动下拉菜单。
slide-bottom 从底部滑动下拉菜单。
slide-left 从左侧滑动下拉菜单。
slide-right 从右侧滑动下拉菜单。
reveal-top 从顶部显示下拉菜单。
reveal-bottom 从底部显示下拉菜单。
reveal-left 从左侧显示下拉菜单。
reveal-right 从右侧显示下拉菜单。 
<div uk-dropdown="animation: slide-top; animate-out: true"></div>
<div class="uk-margin" uk-margin>

    <div class="uk-inline">
        <button class="uk-button uk-button-default" type="button">Slide Top</button>
        <div uk-dropdown="animation: slide-top; animate-out: true; duration: 700">
            <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 class="uk-inline">
        <button class="uk-button uk-button-default" type="button">Reveal Top</button>
        <div uk-dropdown="animation: reveal-top; animate-out: true; duration: 700">
            <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 class="uk-inline">
        <button class="uk-button uk-button-default" type="button">Slide Left</button>
        <div uk-dropdown="animation: slide-left; animate-out: true; duration: 700">
            <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 class="uk-inline">
        <button class="uk-button uk-button-default" type="button">Reveal Left</button>
        <div uk-dropdown="animation: reveal-left; animate-out: true; duration: 700">
            <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>

偏移

要定义下拉菜单及其切换之间的自定义偏移，请添加带有像素值的 offset 选项。

<div uk-dropdown="offset: 80"></div>
<button class="uk-button uk-button-default" type="button">Hover</button>
<div uk-dropdown="offset: 80">
    <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>

组件选项

这些选项中的任何一个都可以应用于组件属性。用分号分隔多个选项。了解更多

选项 值 默认值 描述
toggle CSS 选择器 - * 要用作切换的元素的 CSS 选择器。默认情况下，是前面的元素。
pos 字符串 bottom-left 下拉位置。
stretch 布尔值，字符串 false 在两个（true）或给定轴 (x, y) 上拉伸下拉菜单。
mode 字符串 click, hover 下拉菜单触发行为模式的逗号分隔列表 (click, hover)。
delay-show 数字 0 在悬停模式下，显示下拉菜单之前的延迟时间（毫秒）。
delay-hide 数字 800 在悬停模式下，隐藏下拉菜单之前的延迟时间（毫秒）。
auto-update 布尔值 true 通过将此选项设置为 false 来禁用滚动时的动态定位。
boundary CSS 选择器 false 下拉菜单不能超过的区域，导致其翻转和移动。默认情况下，是最近的滚动祖先。
boundary-x CSS 选择器 false 下拉菜单在 x 轴上不能超过的区域，导致其翻转和移动。
boundary-y CSS 选择器 false 下拉菜单在 y 轴上不能超过的区域，导致其翻转和移动。
target 布尔值，CSS 选择器 false 下拉菜单定位到的元素 (true 表示窗口)。
target-x 布尔值，CSS 选择器 false 下拉菜单定位到的元素的 X 轴 (true 表示窗口)。
target-y 布尔值，CSS 选择器 false 下拉菜单定位到的元素的 Y 轴 (true 表示窗口)。
inset 布尔值 false 在其目标内定位。
flip 布尔值 true 如果下拉菜单溢出边界，则沿主轴翻转下拉菜单。
shift 布尔值 true 如果下拉菜单溢出边界，则沿交叉轴移动下拉菜单。
offset 数字 0 下拉菜单偏移。
animation 字符串 uk-animation-fade 动画的空格分隔名称。动画输出用逗号分隔。
animate-out 布尔值 false 在关闭下拉菜单时使用动画。
bg-scroll 布尔值 true 允许在打开下拉菜单时滚动背景。
close-on-scroll 布尔值 false 在滚动父滚动容器时关闭下拉菜单。
duration 数字 200 动画持续时间。
container 布尔值 false 通过选择器定义目标容器，以指定应将下拉菜单附加到 DOM 中的位置。

pos 是主要选项，如果它是属性值中的唯一选项，则可以省略其键。

<span uk-dropdown="top-left"></span>

JavaScript

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

初始化

UIkit.dropdown(element, options);

事件

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

名称 描述
toggle 在切换项目之前触发。
beforeshow 在显示项目之前触发。可以通过在事件上调用 preventDefault() 来阻止显示。
show 在显示项目之后触发。
shown 在项目显示动画完成之后触发。
beforehide 在隐藏项目之前触发。可以通过在事件上调用 preventDefault() 来阻止隐藏。
hide 在隐藏项目之前触发。
hidden 在隐藏项目之后触发。
stack 在应用 drop-stack 类时触发。

方法

以下方法可用于该组件

显示

UIkit.dropdown(element).show();

显示下拉菜单。

隐藏

UIkit.dropdown(element).hide(delay);

隐藏下拉菜单。

名称 类型 默认值 描述
delay 布尔值 true 延迟隐藏下拉菜单。

无障碍访问

下拉菜单组件遵循 菜单按钮 WAI-ARIA 设计模式 并自动设置适当的 WAI-ARIA 角色、状态和属性。

键盘交互

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