网页交互的时候经常需要上下文菜单或者隐藏/展示菜单项,Bootstrap提供了下拉菜单的设置方法。
只有在菜单的父元素上应用.open样式(当单击“下拉菜单”按钮的时候,会自动在.dropdown样式的div元素上再次附加一个.open样式)并且该元素设定为position:relative(直接使用.dropdown样式)的时候,下拉菜单才会正常显示,
注意:设置菜单标题,则为li元素应用.dropdown-header样式,例子:
<div class="dropdown open"> <span style="white-space:pre"> </span><ul aria-labelledby="dropdownMenu2" role="menu" class="dropdown-menu"> <li class="dropdown-header" role="presentation">翻译图书</li> <li role="presentation"><a href="#" tabindex="-1" role="menuitem">JavaScript编程精解</a> </li> <li role="presentation"><a href="#" tabindex="-1" role="menuitem">JavaScript权威指南</a> </li> <li role="presentation"><a href="#" tabindex="-1" role="menuitem">JavaScript设计模式</a> </li> <li role="presentation"><a href="#" tabindex="-1" role="menuitem">JavaScript程序设计</a> </li> </ul> </div>
菜单默认左对齐,给ul加一个pull-right样式,会使菜单变为右对齐:
<div class="dropdown open"> <ul aria-labelledby="dropdownMenu2" role="menu" class="dropdown-menu pull-right"> <li class="dropdown-header" role="presentation">翻译图书</li> <li role="presentation"><a href="#" tabindex="-1" role="menuitem">JavaScript编程精解</a> </li> <li role="presentation"><a href="#" tabindex="-1" role="menuitem">JavaScript权威指南</a> </li> <li role="presentation"><a href="#" tabindex="-1" role="menuitem">JavaScript设计模式</a> </li> <li role="presentation"><a href="#" tabindex="-1" role="menuitem">JavaScript程序设计</a> </li> </ul> </div>
二、上面说了最外层div需要有open样式,下拉菜单才能显示,而且,当单击“下拉菜单”按钮的时候,会自动在.dropdown样式的div元素上再次附加一个.open样式,这个按钮就在下拉菜单的上面,例如:
<div class="dropdown"> <a data-toggle="dropdown" class="dropdown-toggle btn btn-default" role="button" href="#">Dropdown<span class="caret"></span></a> <ul aria-labelledby="dropdownMenu2" role="menu" class="dropdown-menu"> <li class="dropdown-header" role="presentation">翻译图书</li> <li role="presentation"><a href="#" tabindex="-1" role="menuitem">JavaScript编程精解</a> </li> <li role="presentation"><a href="#" tabindex="-1" role="menuitem">JavaScript权威指南</a> </li> <li role="presentation"><a href="#" tabindex="-1" role="menuitem">JavaScript设计模式</a></li> <li role="presentation"><a href="#" tabindex="-1" role="menuitem">JavaScript程序设计</a> </li> </ul> </div>效果:
需要注意的是:
1、被单击的链接或按钮上需要应用data-toggl=“dropdown” 样式,以便在初始化的时候JavaScript可以监控单击事件
2、我发现,去掉按钮a的class中的dropdown-toggle样式后,并没有啥影响,这说明JavaScript检测单击事件不使用这个样式,但是可能有其他作用,暂时不知道!
3、为了避免href=”#”被单击时页面跳到顶部,可以使用data-target=”#”代替href=”#”。
实现原理如下:
1、Dropdown插件在网页加载的时候,对所有带有datatoggle=“dropdown”样式的元素进行事件绑定。
2用户单击带有data-toggle=“dropdown”样式的链接或按钮时,触发JavaScript事件代码。
3、Javascript事件代码在父容器(本例是:<li class=“dropdown”>)上加一个.open样式。
4、默认隐藏的.dropdown-menu菜单在外部有了.open样式后,即可显示出来,从而达到预期的效果。
另外:那个按钮可以放在容器元素的外面,此时,需要为ul设置一个id,然后,让按钮的href或data-target的值为此id即可,效果和上例是一样的,例如:
<a data-toggle="dropdown" class="dropdown-toggle btn btn-default" role="button" data-target="#menutest" >Dropdown<span class="caret"></span></a> <div class="dropdown" id="menutest"> <ul aria-labelledby="dropdownMenu2" role="menu" class="dropdown-menu"> <li class="dropdown-header" role="presentation">翻译图书</li> <li role="presentation"><a href="#" tabindex="-1" role="menuitem">JavaScript编程精解</a> </li> <li role="presentation"><a href="#" tabindex="-1" role="menuitem">JavaScript权威指南</a> </li> <li role="presentation"><a href="#" tabindex="-1" role="menuitem">JavaScript设计模式</a></li> <li role="presentation"><a href="#" tabindex="-1" role="menuitem">JavaScript程序设计</a> </li> </ul> </div>
三、JavaScript代码控制菜单的显示与隐藏:
Bootstrap的Dropdown插件也支持JavaScript手动触发的方式,这样的好处是,可以按照自己的方式省略一些元素或者样式:
<script type=“text/javascript”> $(document).ready( function () { $(‘.dropdown-toggle’).dropdown(); }); </script>
上面的这个#myDropdown是的最外层的那个div的 id
四、下拉菜单常用情况
一般下拉菜单都是在导航条(navbar)和选项卡(tab)上实现。
1、导航条实现:
<div class="navbar navbar-default"> <div class="navbar-header"><a class="navbar-brand" href="#">Brand</a></div> <ul class="nav navbar-nav"> <li class="dropdown"> <a data-toggle="dropdown" class="dropdown-toggle btn btn-default" role="button">Dropdown<span class="caret"></span></a> <ul aria-labelledby="dropdownMenu2" role="menu" class="dropdown-menu"> <li class="dropdown-header" role="presentation">翻译图书</li> <li role="presentation"><a href="#" tabindex="-1" role="menuitem">JavaScript编程精解</a> </li> <li role="presentation"><a href="#" tabindex="-1" role="menuitem">JavaScript权威指南</a> </li> <li role="presentation"><a href="#" tabindex="-1" role="menuitem">JavaScript设计模式</a></li> <li role="presentation"><a href="#" tabindex="-1" role="menuitem">JavaScript程序设计</a> </li> </ul> </li> <li class="dropdown"> <a data-toggle="dropdown" class="dropdown-toggle btn btn-default" role="button">Dropdown<span class="caret"></span></a> <ul aria-labelledby="dropdownMenu2" role="menu" class="dropdown-menu"> <li class="dropdown-header" role="presentation">翻译图书</li> <li role="presentation"><a href="#" tabindex="-1" role="menuitem">JavaScript编程精解</a> </li> <li role="presentation"><a href="#" tabindex="-1" role="menuitem">JavaScript权威指南</a> </li> <li role="presentation"><a href="#" tabindex="-1" role="menuitem">JavaScript设计模式</a></li> <li role="presentation"><a href="#" tabindex="-1" role="menuitem">JavaScript程序设计</a> </li> </ul> </li> <li class="dropdown"> <a data-toggle="dropdown" class="dropdown-toggle btn btn-default" role="button">Dropdown<span class="caret"></span></a> <ul aria-labelledby="dropdownMenu2" role="menu" class="dropdown-menu"> <li class="dropdown-header" role="presentation">翻译图书</li> <li role="presentation"><a href="#" tabindex="-1" role="menuitem">JavaScript编程精解</a> </li> <li role="presentation"><a href="#" tabindex="-1" role="menuitem">JavaScript权威指南</a> </li> <li role="presentation"><a href="#" tabindex="-1" role="menuitem">JavaScript设计模式</a></li> <li role="presentation"><a href="#" tabindex="-1" role="menuitem">JavaScript程序设计</a> </li> </ul> </li> <li class="dropdown"> <a data-toggle="dropdown" class="dropdown-toggle btn btn-default" role="button">Dropdown<span class="caret"></span></a> <ul aria-labelledby="dropdownMenu2" role="menu" class="dropdown-menu"> <li class="dropdown-header" role="presentation">翻译图书</li> <li role="presentation"><a href="#" tabindex="-1" role="menuitem">JavaScript编程精解</a> </li> <li role="presentation"><a href="#" tabindex="-1" role="menuitem">JavaScript权威指南</a> </li> <li role="presentation"><a href="#" tabindex="-1" role="menuitem">JavaScript设计模式</a></li> <li role="presentation"><a href="#" tabindex="-1" role="menuitem">JavaScript程序设计</a> </li> </ul> </li> </ul> </div>效果:
2、选项卡上:
<ul class="nav nav-pills"> <li class="dropdown"> <a data-toggle="dropdown" class="dropdown-toggle btn btn-default" role="button">Dropdown<span class="caret"></span></a> <ul aria-labelledby="dropdownMenu2" role="menu" class="dropdown-menu"> <li class="dropdown-header" role="presentation">翻译图书</li> <li role="presentation"><a href="#" tabindex="-1" role="menuitem">JavaScript编程精解</a> </li> <li role="presentation"><a href="#" tabindex="-1" role="menuitem">JavaScript权威指南</a> </li> <li role="presentation"><a href="#" tabindex="-1" role="menuitem">JavaScript设计模式</a></li> <li role="presentation"><a href="#" tabindex="-1" role="menuitem">JavaScript程序设计</a> </li> </ul> </li> <li class="dropdown"> <a data-toggle="dropdown" class="dropdown-toggle btn btn-default" role="button">Dropdown<span class="caret"></span></a> <ul aria-labelledby="dropdownMenu2" role="menu" class="dropdown-menu"> <li class="dropdown-header" role="presentation">翻译图书</li> <li role="presentation"><a href="#" tabindex="-1" role="menuitem">JavaScript编程精解</a> </li> <li role="presentation"><a href="#" tabindex="-1" role="menuitem">JavaScript权威指南</a> </li> <li role="presentation"><a href="#" tabindex="-1" role="menuitem">JavaScript设计模式</a></li> <li role="presentation"><a href="#" tabindex="-1" role="menuitem">JavaScript程序设计</a> </li> </ul> </li> <li class="dropdown"> <a data-toggle="dropdown" class="dropdown-toggle btn btn-default" role="button">Dropdown<span class="caret"></span></a> <ul aria-labelledby="dropdownMenu2" role="menu" class="dropdown-menu"> <li class="dropdown-header" role="presentation">翻译图书</li> <li role="presentation"><a href="#" tabindex="-1" role="menuitem">JavaScript编程精解</a> </li> <li role="presentation"><a href="#" tabindex="-1" role="menuitem">JavaScript权威指南</a> </li> <li role="presentation"><a href="#" tabindex="-1" role="menuitem">JavaScript设计模式</a></li> <li role="presentation"><a href="#" tabindex="-1" role="menuitem">JavaScript程序设计</a> </li> </ul> </li> <li class="dropdown"> <a data-toggle="dropdown" class="dropdown-toggle btn btn-default" role="button">Dropdown<span class="caret"></span></a> <ul aria-labelledby="dropdownMenu2" role="menu" class="dropdown-menu"> <li class="dropdown-header" role="presentation">翻译图书</li> <li role="presentation"><a href="#" tabindex="-1" role="menuitem">JavaScript编程精解</a> </li> <li role="presentation"><a href="#" tabindex="-1" role="menuitem">JavaScript权威指南</a> </li> <li role="presentation"><a href="#" tabindex="-1" role="menuitem">JavaScript设计模式</a></li> <li role="presentation"><a href="#" tabindex="-1" role="menuitem">JavaScript程序设计</a> </li> </ul> </li> </ul>效果:
五、按钮分离式下拉菜单
就是单击按钮旁边的小三角弹出下拉菜单,单击按钮可以是其他效果。
<div class="btn-group"> <button type="button" class="btn btn-default">Default</button> <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">JavaScript权威指南</a> </li> <li><a href="#">JavaScript设计模式</a> </li> <li><a href="#">JavaScript语言精粹</a> </li> </ul> </div>效果:
另外,给最外层div加一个dropup样式,则会使菜单向上弹出,而不是向下弹出,<div class=dropdown dropup">...</div>