下拉菜单

为可拨动的下拉菜单定义不同的样式

用法

任意内容，比如一个按钮，都可以作为切换器用来切换下拉菜单。只需用一个带 data-uk-dropdown 属性的 <div> 元素将其包裹即可。添加 .uk-dropdown 类到一个子级的 <div> 元素来创建下拉菜单本身。一个下拉菜单可以通过鼠标悬停或者的点击的方式来拨动。

重要 为了应用一个下拉菜单，其父元素拥有一个能恰当地将二者对齐的相对位置是很重要的。 很多组件默认地创建了这样的定位场景，比如 按钮，导航栏，二级导航 和 选项卡 等组件。

示例

注意 在这个例子理我们使用了 按钮组件 作为拨动器。

Code

<!-- 这是JavaScript关联的容器 -->
<div data-uk-dropdown>

    <!-- 拨动下拉菜单的元素 -->
    <div>...</div>

    <!-- 这是下拉菜单 -->
    <div class="uk-dropdown">...</div>

</div>

<!-- 这是关联了点击模式的JavaScript的容器 -->
<div data-uk-dropdown="{mode:'click'}">

    <!-- 拨动下拉菜单的元素 -->
    <div>...</div>

    <!-- 这是下拉菜单 -->
    <div class="uk-dropdown">...</div>

</div>

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

你可以设置一个以毫秒为单位的 delay 参数来防止下拉菜单立即显示出来。

Code

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

带有导航菜单的下拉菜单

下拉菜单可以包含一个 导航菜单，只需添加 .uk-nav 类和 .uk-nav-dropdown 修饰类到一个 <ul> 元素中。

Code

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

对齐修饰

给下拉菜单添加对齐样式，只需添加以下pos:''参数中的一个到 data属性就行了。

Example

Markup

<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，这样下拉菜单便会扩宽度至这个被标记的元素的宽度。

示例

Markup

<!-- 这是需要调整的下拉菜单的父元素 -->
<div id="my-id">

    <!-- 这是关联了JavaScript的容器 -->
    <div class="uk-button-dropdown" data-uk-dropdown="{justify:'#my-id'}">

        <!-- 拨动下拉菜单的元素 -->
        <button class="uk-button">...</button>

        <!-- 这是下拉菜单 -->
        <div class="uk-dropdown">...</div>
    </div>
</div>

下拉菜单自动翻转

默认情况下，当下拉菜单超出了视口边缘便会自动地翻转。如果你想根据容器的边界来翻转它，只需添加 data-uk-dropdown="{boundary:'#ID'}" 属性，这个属性中的ID对应容器的ID。

示例

Code

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

网格

你甚至可以在下拉菜单中放置一个包含导航或者其它内容的 网格组件。只需用一个带有 .uk-grid类的 <div> 元素包裹着这些内容。为了优化下拉菜单中的网格，需要添加 .uk-dropdown-grid 类名。添加一个 .uk-dropdown-width-* 类名到网格的子元素，最多可以并列5个列。

Example

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

Markup

<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 类即可。这对一个按钮下拉菜单是很有用的。

示例

Code

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

可滚动的修饰

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

示例

Code

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

导航栏中的修饰

下拉菜单是 导航栏组件 的基本组成部分。只需添加 .uk-dropdown-navbar 类到下拉菜单中，这样下拉菜单便会完美地融入导航栏中。

示例

Code

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

        <!-- 这是关联了JavaScript的容器 -->
        <li class="uk-parent" data-uk-dropdown>

            <!-- 拨动下拉菜单的菜单项 -->
            <a href="">...</a>

            <!-- 这是下拉菜单 -->
            <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就行了。

Example

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

NOTE 在这个例子中，我们使用了面板组件来设定下拉菜单的样式。

Markup

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

按钮中的下拉菜单

按钮组件 中的按钮可以用来切换下拉菜单。

示例

Code

<!-- 这是关联了JavaScript的容器 -->
<div class="uk-button-dropdown" data-uk-dropdown>

    <!-- 这是切换下拉菜单的按钮 -->
    <button class="uk-button">...</button>

    <!-- 这是下拉菜单 -->
    <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>

按钮组中的下拉菜单

使用 按钮组件 中的按钮组，将按钮分作一个标准的按钮和一个下拉菜单拨动器。

示例

Code

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

    <!-- 这是一个按钮 -->
    <button class="uk-button">...</button>

    <!-- 这是关联了JavaScript的容器 -->
    <div data-uk-dropdown="{mode:'click'}">

        <!-- 拨动下拉菜单的按钮 -->
        <a href="" class="uk-button">...</a>

        <!-- 这是下拉菜单 -->
        <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>

子导航中的下拉菜单

下拉菜单也可以用在 子导航组件 中。

示例

Code

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

    <!-- 这是关联了JavaScript的容器 -->
    <li data-uk-dropdown="{mode:'click'}">

        <!-- 拨动下拉菜单的导航元素 -->
        <a href="">...</a>

        <!-- 这是下拉菜单 -->
        <div class="uk-dropdown uk-dropdown-small">
            <ul class="uk-nav uk-nav-dropdown">
                <li><a href="">...</a></li>
            </ul>
        </div>

    </li>
</ul>

选项卡中的下拉菜单

下拉菜单可以用在 选项卡组件 中。

示例

Code

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

    <!-- 这是关联了JavaScript的容器 -->
    <li data-uk-dropdown="{mode:'click'}">

        <!-- 拨动下拉菜单的选项卡标签 -->
        <a href="">...</a>

        <!-- 这是下拉菜单 -->
        <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'}"

事件

你可以为自定义的功能绑定回调事件。

Example

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

CSS 选项

添加类名 .uk-dropdown-close 到下拉菜单容器或菜单条目，用于点击该条目时隐藏下拉菜单to dropdown container or to item to hide dropdown when user click on item.