下拉菜单

相对于另一个元素定位任何元素。

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

使用

任何内容，例如按钮，都可以切换下拉菜单组件。只需在切换元素之后的块元素上添加 uk-drop 属性。

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

要将切换元素和下拉菜单组合在一起，只需用一个容器元素将它们包装起来，并从实用程序组件中添加 .uk-inline 类。

<div class="uk-inline">
    <button type="button"></button>
    <div uk-drop></div>
</div>

注意下拉菜单组件没有默认样式。在本示例中，我们使用来自卡片组件的卡片进行可视化。

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

<div class="uk-inline">
    <button class="uk-button uk-button-default" type="button">Hover, Click</button>
    <div class="uk-card uk-card-body uk-card-default" uk-drop>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</div>
</div>

模式

默认情况下，下拉菜单在悬停和点击时切换。设置 mode 选项更改切换行为。

模式	描述
`click,hover`	点击和悬停时切换下拉菜单。
`click`	仅点击时切换下拉菜单。
`hover`	仅悬停时切换下拉菜单。

<div uk-drop="mode: click"></div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

<div class="uk-inline">
    <button class="uk-button uk-button-default" type="button">Hover</button>
    <div class="uk-card uk-card-body uk-card-default" uk-drop="mode: hover">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</div>
</div>

<div class="uk-inline">
    <button class="uk-button uk-button-default" type="button">Click</button>
    <div class="uk-card uk-card-body uk-card-default" uk-drop="mode: click">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</div>
</div>

父级图标

要创建一个父级图标，只需在 <span> 元素上添加 uk-drop-parent-icon 属性。

<button type="button">Parent <span uk-drop-parent-icon></span></button>
<div uk-drop="mode: click"></div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

<div class="uk-inline">
    <button class="uk-button uk-button-default" type="button">Parent <span uk-drop-parent-icon></span></button>
    <div class="uk-card uk-card-body uk-card-default" uk-drop="mode: click">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</div>
</div>

宽度和网格

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

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

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

<button class="uk-button uk-button-default" type="button">Hover</button>
<div class="uk-card uk-card-body uk-card-default uk-width-large" uk-drop>
    <div class="uk-drop-grid uk-child-width-1-2@m" uk-grid>
        <div>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
        </div>
        <div>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
        </div>
    </div>
</div>

定位

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

定位	描述
`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-drop="pos: top-left"></div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

<div class="uk-inline">
    <button class="uk-button uk-button-default" type="button">Top Right</button>
    <div class="uk-card uk-card-body uk-card-default" uk-drop="pos: top-right">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</div>
</div>

<div class="uk-inline">
    <button class="uk-button uk-button-default" type="button">Bottom Center</button>
    <div class="uk-card uk-card-body uk-card-default" uk-drop="pos: bottom-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</div>
</div>

<div class="uk-inline">
    <button class="uk-button uk-button-default" type="button">Right Top</button>
    <div class="uk-card uk-card-body uk-card-default" uk-drop="pos: right-top">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</div>
</div>

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

<div class="my-class">
    <button type="button"></button>
    <div uk-drop="boundary: !.my-class"></div>
</div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

<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 class="uk-card uk-card-body uk-card-default" uk-drop="pos: bottom-right; boundary: !.boundary">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</div>

    <button class="uk-button uk-button-default uk-float-right" type="button">Bottom Left</button>
    <div class="uk-card uk-card-body uk-card-default" uk-drop="pos: bottom-left; boundary: !.boundary">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</div>

</div>

移动和翻转

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

<div uk-drop="shift: false; flip: false"></div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

<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 class="uk-card uk-card-body uk-card-default" uk-drop="pos: bottom-right; boundary: !.boundary; shift: false; flip: false">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</div>

    <button class="uk-button uk-button-default uk-float-right" type="button">Bottom Left</button>
    <div class="uk-card uk-card-body uk-card-default" uk-drop="pos: bottom-left; boundary: !.boundary; shift: false; flip: false">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</div>

</div>

自动更新

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

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

目标

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

<div class="my-class">
    <button type="button"></button>
    <div uk-drop="target: !.my-class"></div>
</div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

<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 class="uk-card uk-card-body uk-card-default" uk-drop="pos: bottom-left; target: !.target">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</div>

    <button class="uk-button uk-button-default uk-float-right" type="button">Bottom Right</button>
    <div class="uk-card uk-card-body uk-card-default" uk-drop="pos: bottom-right; target: !.target">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</div>

</div>

内嵌

默认情况下，下拉菜单定位在切换元素外部。要将位置更改为内部，请将 inset: true 选项添加到 uk-drop 属性。此选项应仅在 target 选项也设置的情况下使用，这样下拉菜单就不会覆盖其切换元素。

<div uk-drop="target: .my-class; inset: true"></div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

<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 class="uk-card uk-card-body uk-card-default" uk-drop="pos: bottom-left; target: !.target; inset: true">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</div>

    <button class="uk-button uk-button-default uk-float-right" type="button">Bottom Right</button>
    <div class="uk-card uk-card-body uk-card-default" uk-drop="pos: bottom-right; target: !.target; inset: true">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</div>

</div>

拉伸

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

<div uk-drop="stretch: true"></div>

- 悬停
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

<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-drop="boundary: !.uk-navbar; stretch: x; flip: false">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</div>
            </li>
        </ul>

    </div>
</nav>

动画

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

<div uk-drop="animation: uk-animation-slide-top-small; duration: 1000"></div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

<button class="uk-button uk-button-default" type="button">Hover</button>
<div class="uk-card uk-card-body uk-card-default" uk-drop="animation: uk-animation-slide-top-small; animate-out: true">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</div>

或者，下拉菜单组件还有两种额外的动画类型，它们没有包含在动画组件中。slide-* 动画从选定的方向滑动下拉菜单及其内容，而 reveal-* 动画则保持下拉菜单的内容静止，并从选定的方向显示。

动画	描述
`slide-top`	从顶部滑动下拉菜单。
`slide-bottom`	从底部滑动下拉菜单。
`slide-left`	从左侧滑动下拉菜单。
`slide-right`	从右侧滑动下拉菜单。
`reveal-top`	从顶部显示下拉菜单。
`reveal-bottom`	从底部显示下拉菜单。
`reveal-left`	从左侧显示下拉菜单。
`reveal-right`	从右侧显示下拉菜单。

<div uk-drop="animation: slide-top; animate-out: true"></div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

<div class="uk-margin" uk-margin>

    <div class="uk-inline">
        <button class="uk-button uk-button-default" type="button">Slide Top</button>
        <div class="uk-card uk-card-body uk-card-default" uk-drop="animation: slide-top; animate-out: true; duration: 700">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</div>
    </div>

    <div class="uk-inline">
        <button class="uk-button uk-button-default" type="button">Reveal Top</button>
        <div class="uk-card uk-card-body uk-card-default" uk-drop="animation: reveal-top; animate-out: true; duration: 700">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</div>
    </div>

    <div class="uk-inline">
        <button class="uk-button uk-button-default" type="button">Slide Left</button>
        <div class="uk-card uk-card-body uk-card-default" uk-drop="animation: slide-left; animate-out: true; duration: 700">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</div>
    </div>

    <div class="uk-inline">
        <button class="uk-button uk-button-default" type="button">Reveal Left</button>
        <div class="uk-card uk-card-body uk-card-default" uk-drop="animation: reveal-left; animate-out: true; duration: 700">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</div>
    </div>

</div>

偏移量

要定义下拉菜单与其切换元素之间的自定义偏移量，请添加 offset 选项，并使用像素值。

<div uk-drop="offset: 80"></div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

<button class="uk-button uk-button-default" type="button">Hover</button>
<div class="uk-card uk-card-body uk-card-default" uk-drop="offset: 80">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</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-drop="top-left"></span>

JavaScript

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

初始化

UIkit.drop(element, options);

事件

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

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

方法

组件提供以下方法

Show

UIkit.drop(element).show();

显示下拉菜单。

Hide

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

隐藏下拉菜单。

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

无障碍

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

toggle 具有 button 角色、aria-expanded 状态和 aria-haspopup 属性。

键盘交互

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

enter 或 space 键打开和关闭下拉菜单。
esc 键关闭下拉菜单，即使焦点已移至另一个元素。

文档

下拉菜单