下拉菜单
为可切换的下拉菜单定义不同的样式。
用法
任意内容,比如一个按钮,都可以作为切换器用来切换下拉菜单。只需用一个带 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>