下拉菜单

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

用法

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

Data 属性	描述
`data-dropdown`	鼠标悬停打开下拉菜单，并添加一个很小的延迟，这样下拉菜单便不会在你停止在拨动器上悬停时立即消失。
`data-dropdown="{mode:'click'}"`	通过点击拨动器来打开下拉菜单，再次点击，下拉菜单便关闭。

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

示例

代码

<div data-dropdown>
    <!-- 出发下拉菜单的元素 -->
    <div>...</div>
    <!-- 下拉菜单内容 -->
    <div class="dropdown">...</div>
</div>
<div data-dropdown="{mode:'click'}">
    <!-- 触发下拉菜单的元素 -->
    <div>...</div>
    <!-- 下拉菜单内容 -->
    <div class="dropdown">...</div>
</div>

对齐

添加以下类中的一个来对齐下拉菜单。

Class	描述
`dropdown-flip`	右对齐下拉菜单
`dropdown-up`	将下拉菜单对齐在拨动器上方
`dropdown-center`	居中下拉菜单

示例

代码

<div class="dropdown dropdown-flip">...</div>
<div class="dropdown dropdown-up">...</div>
<div class="dropdown dropdown-center">...</div>
<div class="dropdown dropdown-up dropdown-flip">...</div>

下拉菜单两端对齐

调整下拉菜单，只需添加 data-dropdown="{justify:'#ID'}"属性。需要调整的下拉菜单的父元素需要有一个标记 id，这样下拉菜单便会扩宽度至这个被标记的元素的宽度。默认适应到上级目录。

示例

代码

<!-- 下拉组件要对齐的元素 -->
<div id="justify1">
    <!-- 下拉组件 -->
    <div class="btn-dropdown" data-dropdown="{justify:'#justify1'}">
        <!-- 触发下拉菜单的元素 -->
        <button class="btn">两端对齐 <i class="icon-caret-down"></i></button>
        <!-- 下拉菜单内容 -->
        <div class="dropdown">...</div>
    </div>
</div>

缩小调整

默认情况下，下拉菜单有一个固定的宽度并且文字会切换到下一行。如果你想要你的下拉菜单更小巧，以使它延伸到内容的宽度而不再使文本换行，添加 dropdown-sm 类即可。这对一个按钮下拉菜单是很有用的。

示例

代码

<div data-dropdown> 
    ...
    <div class="dropdown dropdown-sm">...</div>
</div>

可滚动的下拉菜单

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

示例

代码

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

分栏的下拉菜单

创建多分栏的下拉菜单。

示例

代码

<div class="btn-dropdown" data-dropdown>
    <button class="btn">下拉菜单 <i class="icon-caret-down"></i></button>
    <div class="dropdown dropdown-grid-2">
        <div class="dropdown-row">
            <div class="width-sm-2-1">
                <ul class="nav nav-dropdown">...</ul>
            </div>
            <div class="width-sm-2-1">
                ...
            </div>
        </div>
    </div>
</div>

导航栏中的下拉菜单

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

示例

代码

<nav class="navbar">
    <ul class="navbar-nav">
        <!-- 下拉组件 -->
        <li class="parent" data-dropdown>
            <!-- 触发下拉菜单的元素 -->
            <a href="">...</a>
            <!-- 下拉菜单内容 -->
            <div class="dropdown dropdown-navbar">
                <ul class="nav nav-navbar">
                    <li><a href="">...</a></li>
                </ul>
            </div>
        </li>
    </ul>
</nav>

按钮中的下拉菜单

按钮可以用来切换下拉菜单。

示例

代码

<!-- 下拉组件 -->
<div class="btn-dropdown" data-dropdown>
    <!-- 触发下拉菜单的元素 -->
    <button class="btn">...</button>
    <!-- 下拉菜单内容 -->
    <div class="dropdown">
        <ul class="nav nav-dropdown">
            <li><a href="">...</a></li>
            <li><a href="">...</a></li>
        </ul>
    </div>
</div>

按钮组的下拉菜单

示例

代码

<div class="btn-group">
    <!-- 按钮组 -->
    <button class="btn">...</button>
    <!-- 下拉组件 -->
    <div data-dropdown="{mode:'click'}">
        <!-- 触发下拉菜单的元素 -->
        <a href="" class="btn">...</a>
        <!-- 下拉菜单内容 -->
        <div class="dropdown dropdown-sm">
            <ul class="nav nav-dropdown">
                <li><a href="">...</a></li>
                <li><a href="">...</a></li>
            </ul>
        </div>
    </div>
</div>

二级导航中的下拉菜单

下拉菜单也可以用在二级导航中。

示例

代码

<ul class="subnav subnav-pill">
    <li data-dropdown="{mode:'click'}">
        <a href="">...</a>
        <div class="dropdown dropdown-sm">...</div>
    </li>
</ul>
<ul class="subnav subnav-tab">
    <li data-dropdown="{mode:'click'}">
        <a href="">...</a>
        <div class="dropdown dropdown-sm">...</div>
    </li>
</ul>