下拉菜单

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

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

用法

任何内容（如按钮）都可以切换下拉菜单组件。只需将 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.

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

父图标

要创建父图标，只需将 uk-drop-parent-icon 属性添加到 <span> 元素。

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

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

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

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

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

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

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

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

<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` 类时触发。

方法

以下方法可用于该组件

显示

UIkit.drop(element).show();

显示下拉菜单。

隐藏

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

隐藏下拉菜单。

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

无障碍访问

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

切换按钮具有 button 角色、aria-expanded 状态和 aria-haspopup 属性。

键盘交互

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

按下 enter 或 空格 键可以打开和关闭 Drop。
即使焦点已移动到另一个元素，按下 esc 键也会关闭 Drop。

文档

下拉菜单