跳到主要内容

文档

Dropdown

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

下拉菜单（Dropdown）组件具有方向感知能力。这意味着只要鼠标指针朝下拉菜单方向移动，它就会保持打开。额外的延时可以确保即使鼠标指针短暂移向其他方向，下拉菜单也不会立即关闭。如果悬停到另一个菜单项上，下拉菜单会立即关闭。

用法

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

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

下拉菜单可以通过悬停和点击切换元素来打开。只需在属性中添加 mode: click 选项，即可强制只使用 click 模式。如果想把切换元素和下拉菜单组合在一起，只需把 Utility 组件的 .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>

下拉菜单中的导航

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

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

宽度与网格

你可以在下拉菜单中放置 Grid 组件的网格。只需用 <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>

使用 Width 组件中的某个类来调整下拉菜单的宽度。

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

Large 修饰符

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

定位

默认情况下，下拉菜单定位在切换元素的下方。要改变它的位置，请为 uk-dropdown 属性设置 pos 选项。值的第一部分指明下拉菜单定位在哪一侧，第二部分定义它与切换元素的对齐方式。

Position 说明
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>

边界

默认情况下，如果下拉菜单超出视口或任何其他可滚动的父级祖先元素，它会自动改变位置。它会翻转到另一侧以避免遮住切换元素，并偏移对齐方式以适应视口。要设置滚动祖先之外的其他边界，只需在 uk-dropdown 属性中添加 boundary: SELECTOR 选项，并用选择器指定边界。

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

偏移与翻转

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

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

自动更新

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

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

目标

默认情况下，下拉菜单与它的切换元素对齐。要把下拉菜单定位到另一个元素，只需在 uk-dropdown 属性中添加 target: SELECTOR 选项。如果只想改变下拉菜单所在的一侧，或只想改变与另一个元素的对齐方式，请使用 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>

内嵌

默认情况下，下拉菜单定位在切换元素外部。要把位置改到内部，请在 uk-dropdown 属性中添加 inset: true 选项。只有同时设置了 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>

拉伸

要让下拉菜单拉伸以填满最近的滚动祖先元素的尺寸，请在 uk-dropdown 属性中添加 stretch: true 选项。如果只想在某个轴上拉伸，请使用 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>

动画

通过在 uk-dropdown 属性中添加 animation: uk-animation-* 选项，并使用 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>

另外，Drop 组件还有两种 Animation 组件未涵盖的动画类型。slide-* 动画会按所选方向滑动下拉菜单及其内容，而 reveal-* 动画会让下拉菜单的内容保持静止，并按所选方向显现出来。

Animation 说明
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 selector - * 用作切换元素的元素的 CSS 选择器。默认为前一个元素。
pos String bottom-left 下拉菜单的位置。
stretch Boolean, String false 在两个方向（true）或指定轴（x、y）上拉伸下拉菜单。
mode String click, hover 逗号分隔的下拉菜单触发行为模式列表（click、hover）。
delay-show Number 0 悬停模式下显示下拉菜单之前的延迟时间，单位毫秒。
delay-hide Number 800 悬停模式下隐藏下拉菜单之前的延迟时间，单位毫秒。
auto-update Boolean true 将该选项设为 false，可在滚动时禁用动态定位。
boundary CSS selector false 下拉菜单不可超出的区域，超出时会翻转和偏移。默认为最近的可滚动祖先元素。
boundary-x CSS selector false 下拉菜单在 x 轴上不可超出的区域，超出时会翻转和偏移。
boundary-y CSS selector false 下拉菜单在 y 轴上不可超出的区域，超出时会翻转和偏移。
target Boolean, CSS selector false 下拉菜单所定位到的元素（true 表示 window）。
target-x Boolean, CSS selector false 下拉菜单在 X 轴上所定位到的元素（true 表示 window）。
target-y Boolean, CSS selector false 下拉菜单在 Y 轴上所定位到的元素（true 表示 window）。
inset Boolean false 定位在目标的内部。
flip Boolean true 如果下拉菜单超出边界，则沿主轴翻转。
shift Boolean 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 中的位置。

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

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

JavaScript

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

初始化

UIkit.dropdown(element, options);

事件

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

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

方法

该组件提供以下方法：

Show

UIkit.dropdown(element).show();

显示下拉菜单。

Hide

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

隐藏下拉菜单。

名称 类型 默认值 说明
delay Boolean true 延迟隐藏下拉菜单。

可访问性

Dropdown 组件遵循 Menu Button 的 WAI-ARIA 设计模式，并会自动设置恰当的 WAI-ARIA 角色、状态和属性。

键盘交互

可以通过以下按键从键盘访问 Dropdown 组件。