跳过到主要内容

文档

下拉菜单

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

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

用法

下拉菜单是 下拉 的一个例子，它提供了自己的样式。任何内容，例如按钮，都可以切换下拉菜单。只需将 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 在隐藏项目之后触发。
堆栈 当应用 drop-stack 类时触发。

方法

组件提供以下方法：

显示

UIkit.dropdown(element).show();

显示下拉菜单。

隐藏

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

隐藏下拉菜单。

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

无障碍

Dropdown 组件遵循 菜单按钮 WAI-ARIA 设计模式，并自动设置相应的 WAI-ARIA 角色、状态和属性。

键盘交互

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