下拉菜单

简介

　　下拉菜单在web页面时必不可少的。Bootstrap提供了一套下拉菜单的实现机制，我们按照指定的步骤（套路）就可以简单快速实现。在Bootstrap中下拉菜单是依赖JS实现的，它提供了一个dropdown.js用来实现下拉菜单，在已编译的版本合并的到了Bootstrap.js中（所以我们在页面只需要引入bootstrap.js/bootstrap.min.js就可以）。

基本用法

　　在表单一节输入框组部分我已经列出了淘宝搜索框那块的下拉菜单+输入框+搜索的组合框。在那里用的是class="input-group-btn"父标签。然后将下拉菜单的内容包裹在其内。
　　
　　class="input-group-btn"样式有相对定位，设为table-cell元素（与后面元素连接起来）…。类似的是，在下拉菜单中我们使用class="dropdown"。它的样式只有一个相对定位。这个相对定位了它是为表单菜单需要显示的内容class="dropdown-menu"准备的。它是绝对定位。所以它可以用class="pull-left/dropdown-menu-left"和class="pull-right/dropdown-menu-right"类来定义左右位置。
　　
　　下面三个步骤就可以简单的定义一个下拉菜单。

• 使用class=dropdown的容器包裹整个下拉菜单。
• 在容器内定义一个按钮，用来点击可以展现出下拉菜单。它的样式基本是固定的。
  <button class="btn btn-default dropdown-toggle" data-toggle="dropdown"></button>
• 在<button>同级定义一个<ul>元素。并且添加class="dropdown-menu"。

<div class="dropdown">
    <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
        下拉菜单<span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li><a href="baobei">宝贝</a></li>
        <li><a href="dianpu">店铺</a></li>
    </ul>
</div>
<!--我们使用按钮组也可以实现同样的效果-->
<div class="btn-group dropup">
    <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
        收藏夹<span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li><a href="###">收藏的宝贝</a></li>
        <li><a href="###">收藏的店铺</a></li>
    </ul>
</div>

其中<span class="caret"></span>用来定义一个下三角。

基本原理

　　默认状态下，下拉菜单是不显示的，因为class="dropdown-menu"设置了”display:none”样式。点击下拉菜单的时候，class="dropdown-menu"上会通过一个open类来实现下拉菜单的显示与隐藏。

分割线

　　在class="dropdown-menu"中（通常是ul或ol）添加一个li元素。其类为class="divider"。它会将它上面所有的li（直到上一个class="divider"为止）和它下面所有的li（直到上一个class="divider"为止）分成两部分。通过增加一个分割线。

菜单标题

　　在class="dropdown-menu"中（通常是ul或ol）添加一个li元素。其类为class="dropdown-header"（而面板标题是panel-heading）。添加一个标题。它颜色稍淡，字体偏小。

对齐方式

　　上面简单提到如何定义下拉菜单的对齐样式。默认是相对于父容器左对齐的。想让下拉菜单右对齐，则可以在class="dropdown"中加上class="pull-right"或者class="dropdown-mune-right"即可。当然，想要左对齐（默认）只要将right改成left即可（媒体对象建议使用”media-left/right”）。

菜单状态

　　“active”:表示激活状态，深蓝色。
　　“disabled”:表示禁用状态，鼠标放上去有禁止标志。

综合案例

<div class="dropdown">
    <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
        分割线<span class="caret"></span>
    </button>
    <ul class="dropdown-menu pull-right">
        <li class="dropdown-header">前端技术</li>
        <li><a href="javascript:void(0)">HTML</a></li>
        <li><a href="javascript:void(0)">CSS</a></li>
        <li><a href="javascript:void(0)">Javascript</a></li>
        <li><a href="javascript:void(0)">Jquery</a></li>

        <li class="divider"></li>

        <li class="dropdown-header">后端技术</li>
        <li><a href="javascript:void(0)">nodejs</a></li>
        <li><a href="javascript:void(0)">java</a></li>
        <li><a href="javascript:void(0)">php</a></li>

    </ul>
</div>

小结

　　下拉菜单在页面很常用。于是bootstrap实现了它。并且通过分割线，标题，对齐方式，菜单项状态来让下来菜单更优雅。不过更常用的还是将它作为一个class="input-group-btn来添加到组合框。