下拉菜单

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

用法

任何内容，如按钮，都可以切换下拉菜单。只需将切换器用一个 <div> 元素包裹，并添加 data-uk-dropdown 属性。向子 <div> 元素添加 .uk-dropdown 类来创建下拉菜单本身。可以通过悬停或单击切换器来启用下拉菜单。

数据属性	描述
`data-uk-dropdown`	当悬停时打开下拉菜单，并添加一个小延迟，以便在您停止悬停切换器后，下拉菜单不会立即消失。
`data-uk-dropdown="{mode:'click'}"`	通过单击切换器打开下拉菜单。在下一次单击时，下拉菜单会再次关闭。

重要要应用下拉菜单，重要的是父元素具有相对位置，以便正确对齐下拉菜单。许多组件默认创建位置上下文，例如按钮、导航栏、子导航和标签页组件。

示例

注意在此示例中，我们使用按钮组件中的按钮作为切换器。

标记

<!-- This is the container enabling the JavaScript -->
<div data-uk-dropdown>

    <!-- This is the element toggling the dropdown -->
    <div>...</div>

    <!-- This is the dropdown -->
    <div class="uk-dropdown">...</div>

</div>

<!-- This is the container enabling the JavaScript in click mode -->
<div data-uk-dropdown="{mode:'click'}">

    <!-- This is the element toggling the dropdown -->
    <div>...</div>

    <!-- This is the dropdown -->
    <div class="uk-dropdown">...</div>

</div>

悬停模式下的延迟下拉菜单

您可以在毫秒内设置 delay 参数，以防止下拉菜单立即出现。

标记

<div class="uk-dropdown" data-uk-dropdown="{delay: 1000}">
    ...
</div>

带导航的下拉菜单

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

标记

<div class="uk-dropdown">
    <ul class="uk-nav uk-nav-dropdown">...</ul>
</div>

对齐修饰符

要对齐下拉菜单，只需将 pos:'' 参数添加到数据属性。

参数	描述
`pos:'bottom-left'`	这是默认行为。左对齐的下拉菜单在切换器下方。
`pos:'bottom-center'`	居中的下拉菜单在切换器下方。
`pos:'bottom-right'`	右对齐的下拉菜单在切换器下方。
`pos:'top-left'`	左对齐的下拉菜单在切换器上方。
`pos:'top-center'`	居中的下拉菜单在切换器上方。
`pos:'top-right'`	右对齐的下拉菜单在切换器上方。
`pos:'left-top'`	顶部对齐的下拉菜单在切换器的左侧。
`pos:'left-center'`	居中的下拉菜单在切换器的左侧。
`pos:'left-bottom'`	底部对齐的下拉菜单在切换器的左侧。
`pos:'right-top'`	顶部对齐的下拉菜单在切换器的右侧。
`pos:'right-center'`	居中的下拉菜单在切换器的右侧。
`pos:'right-bottom'`	底部对齐的下拉菜单在切换器的右侧。

示例

标记

<div data-uk-dropdown="{pos:'bottom-center'}"> ... </div>

<div data-uk-dropdown="{pos:'top-right'}"> ... </div>

<div data-uk-dropdown="{pos:'left-center'}"> ... </div>

<div data-uk-dropdown="{pos:'right-top'}"> ... </div>

对齐下拉菜单

要对齐下拉菜单，只需添加 data-uk-dropdown="{justify:'#ID'}" 属性。下拉菜单应该对齐的父元素需要具有目标 ID，以便下拉菜单将扩展到目标元素的完整宽度。

示例

标记

<!-- This is the parent element to which the dropdown is being justified -->
<div id="my-id">

    <!-- This is the container enabling the JavaScript -->
    <div class="uk-button-dropdown" data-uk-dropdown="{justify:'#my-id'}">

        <!-- This is the element toggling the dropdown -->
        <button class="uk-button">...</button>

        <!-- This is the dropdown -->
        <div class="uk-dropdown">...</div>
    </div>
</div>

自动下拉菜单翻转

默认情况下，当下拉菜单超出视口边缘时，它会自动翻转。如果您想根据容器的边界翻转它，只需添加 data-uk-dropdown="{boundary:'#ID'}" 属性，并使用容器的选择器。

示例

标记

<div id="my-id">
    <div class="uk-button-dropdown" data-uk-dropdown="{boundary:'#my-id'}">...</div>
</div>

网格

您甚至可以在下拉菜单中放置来自网格组件的网格，该网格可以容纳导航或任何其他内容。只需用 <div> 包裹内容，并添加 .uk-grid 类。为了优化网格在下拉菜单内的使用，请添加 .uk-dropdown-grid 类。向网格的子元素添加 .uk-dropdown-width-* 类之一，可以将下拉菜单的宽度乘以最多 5。

示例

标记

<div class="uk-dropdown uk-dropdown-width-2">

    <div class="uk-grid uk-dropdown-grid">
        <div class="uk-width-1-2">
            <ul class="uk-nav uk-nav-dropdown uk-panel">...</ul>
            <div class="uk-panel">...</div>
        </div>

        <div class="uk-width-1-2">
            <div class="uk-panel">...</div>
        </div>
    </div>

</div>

响应式行为

在较窄的视口（如手机）中，可能没有足够的空间来扩展下拉菜单。在这种情况下，下拉菜单会翻转其对齐方式。如果仍然没有足够的空间，则网格列将占据全部宽度，并在下拉菜单内垂直堆叠。

小修饰符

默认情况下，下拉菜单具有固定宽度，并且文本会换行到下一行。如果您希望下拉菜单更小，以便它扩展到其内容的宽度而无需文本换行，请添加 .uk-dropdown-small 类。这对于按钮下拉菜单很有用。

示例

标记

<div class="uk-dropdown uk-dropdown-small">...</div>

可滚动修饰符

要给下拉菜单一个固定的高度并使其内容可以滚动，只需添加 .uk-dropdown-scrollable 类。

示例

标记

<div class="uk-dropdown uk-dropdown-scrollable">...</div>

下拉菜单是来自导航栏组件的导航栏的基本组成部分。只需向下拉菜单添加 .uk-dropdown-navbar 类，以便下拉菜单完美地适合导航栏。

示例

标记

<nav class="uk-navbar">
    <ul class="uk-navbar-nav">

        <!-- This is the container enabling the JavaScript -->
        <li class="uk-parent" data-uk-dropdown>

            <!-- This is the menu item toggling the dropdown -->
            <a href="">...</a>

            <!-- This is the dropdown -->
            <div class="uk-dropdown uk-dropdown-navbar">
                <ul class="uk-nav uk-nav-navbar">
                    <li><a href="">...</a></li>
                </ul>
            </div>

        </li>
    </ul>
</nav>

有时您可能想要下拉菜单的功能，但不需要其样式。在这种情况下，只需添加 .uk-dropdown-blank 类而不是 .uk-dropdown。

示例

注意在此示例中，我们使用来自面板组件的面板来设置下拉菜单的样式。

标记

 <div class="uk-dropdown-blank uk-panel uk-panel-box">...</div>

可以使用来自按钮组件的按钮来触发下拉菜单。

示例

标记

<!-- This is the container enabling the JavaScript -->
<div class="uk-button-dropdown" data-uk-dropdown>

    <!-- This is the button toggling the dropdown -->
    <button class="uk-button">...</button>

    <!-- This is the dropdown -->
    <div class="uk-dropdown uk-dropdown-small">
        <ul class="uk-nav uk-nav-dropdown">
            <li><a href="">...</a></li>
            <li><a href="">...</a></li>
        </ul>
    </div>

</div>

按钮组中的下拉菜单

使用来自按钮组件的按钮组将按钮拆分为标准操作和下拉菜单切换器。

示例

标记

<div class="uk-button-group">

    <!-- This is a button -->
    <button class="uk-button">...</button>

    <!-- This is the container enabling the JavaScript -->
    <div data-uk-dropdown="{mode:'click'}">

        <!-- This is the button toggling the dropdown -->
        <a href="" class="uk-button">...</a>

        <!-- This is the dropdown -->
        <div class="uk-dropdown uk-dropdown-small">
            <ul class="uk-nav uk-nav-dropdown">
                <li><a href="">...</a></li>
                <li><a href="">...</a></li>
            </ul>
        </div>

    </div>
</div>

下拉菜单也可以应用于来自子导航组件的子导航。

示例

标记

<ul class="uk-subnav uk-subnav-pill">
    <li><a href="">...</a></li>

    <!-- This is the container enabling the JavaScript -->
    <li data-uk-dropdown="{mode:'click'}">

        <!-- This is the nav item toggling the dropdown -->
        <a href="">...</a>

        <!-- This is the dropdown -->
        <div class="uk-dropdown uk-dropdown-small">
            <ul class="uk-nav uk-nav-dropdown">
                <li><a href="">...</a></li>
            </ul>
        </div>

    </li>
</ul>

可以在来自标签页组件的标签页上使用下拉菜单。

示例

标签页一
标签页二
更多
- 项目
- 另一个项目
- 标题
- 项目
- 另一个项目
- 分隔的项目

标记

<ul class="uk-tab" data-uk-tab>
    <li><a href="">...</a></li>

    <!-- This is the container enabling the JavaScript -->
    <li data-uk-dropdown="{mode:'click'}">

        <!-- This is the menu item toggling the dropdown -->
        <a href="">...</a>

        <!-- This is the dropdown -->
        <div class="uk-dropdown uk-dropdown-small">
            <ul class="uk-nav uk-nav-dropdown">
                <li><a href="">...</a></li>
            </ul>
        </div>
    </li>
</ul>

JavaScript 选项

这是如何通过属性设置选项的示例

data-uk-dropdown="{mode:'hover'}"

选项	可能的值	默认值	描述
`pos`	字符串	bottom-left	下拉菜单位置
`mode`	hover, click	hover	下拉菜单触发行为
`remaintime`	整数	800	在悬停模式下自动关闭下拉菜单之前的剩余时间
`justify`	CSS 选择器	false	将下拉菜单的宽度拉伸到指定的元素
`boundary`	window	CSS 选择器	用于保持下拉菜单可见性的引用元素
`delay`	整数	0	在悬停模式下显示下拉菜单之前的延迟时间（以毫秒为单位）
`hoverDelayIdle`	整数	250	当从一个活动的下拉菜单悬停到另一个下拉菜单时，添加到延迟时间的时间（以毫秒为单位）
`preventflip`	混合	false	防止自动下拉菜单翻转

事件

您可以将回调绑定到以下事件以实现自定义功能

名称	描述
`show.uk.dropdown`	在下拉菜单显示时触发
`hide.uk.dropdown`	在下拉菜单隐藏时触发
`stack.uk.dropdown`	当下拉菜单堆叠以适应屏幕时触发

示例

$('[data-uk-dropdown]').on('show.uk.dropdown', function(){
    // custom code...
});

CSS 选项

向下拉菜单容器或项目添加 .uk-dropdown-close 类，以便在用户单击项目时隐藏下拉菜单。