5-6 下拉菜单(菜单项状态)
本节编程练习不计算学习进度,请电脑登录imooc.com操作

下拉菜单(菜单项状态)

下拉菜单项的默认的状态(不用设置)有悬浮状态(:hover)焦点状态(:focus)

/*查看bootstrap.css文件第3049行~第3054行*/

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
  color: #262626;
  text-decoration: none;
  background-color: #f5f5f5;
}

下拉菜单项除了上面两种状态,还有当前状态(.active)禁用状态(.disabled)。这两种状态使用方法只需要在对应的菜单项上添加对应的类名:

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
  下拉菜单
  <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
    ….
    <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
  </ul>
</div>

运行效果如下:

对应的样式代码也非常简单:

/*请查看bootstrap.css文件第3055行~第3075行*/

.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
  color: #fff;
  text-decoration: none;
  background-color: #428bca;
  outline: 0;
}
.dropdown-menu > .disabled > a,
.dropdown-menu > .disabled > a:hover,
.dropdown-menu > .disabled > a:focus {
  color: #999;
}
.dropdown-menu > .disabled > a:hover,
.dropdown-menu > .disabled > a:focus {
  text-decoration: none;
  cursor: not-allowed;
  background-color: transparent;
  background-image: none;
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}

任务

我来试试:完成下面任务

编写代码实现下拉菜单,效果图:

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <title>菜单项状态</title>
  6. <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  7. </head>
  8. <body>
  9. <div class="dropdown">
  10. <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
  11. 下拉菜单
  12. <span class="caret"></span>
  13. </button>
  14. <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
  15. <li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
  16. <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
  17. <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
  18. <li role="presentation" class="divider"></li>
  19. <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
  20. </ul>
  21. </div>
  22. <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
  23. <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  24. </body>
  25. </html>
下一节