Bootstrap 多级下拉菜单

在很多时候,我们可能需要多级下拉菜单。在一个下拉菜单的某个菜单项中,再创建另一个下拉菜单,即可实现多级下拉菜单。

只需为下拉菜单的任意 <li> 元素添加 .dropdown-submenu 的类,并在该 <li> 元素下添加 .dropdown-menu 类的列表,就可以为该菜单项添加一个子下拉菜单。如:


  1. <div class="dropdown">
  2.   <ul class="dropdown-menu">
  3.     <li><a tabindex="-1" href="#">Action</a></li>
  4.     <li><a tabindex="-1" href="#">Another action</a></li>
  5.     <li><a tabindex="-1" href="#">Something else here</a></li>
  6.     <li class="divider"></li>
  7.     <li class="dropdown-submenu">
  8.       <a tabindex="-1" href="#">More options</a>
  9.       <ul class="dropdown-menu">
  10.         <li><a tabindex="-1" href="#">Second level link</a></li>
  11.         <li><a tabindex="-1" href="#">Second level link</a></li>
  12.         <li><a tabindex="-1" href="#">Second level link</a></li>
  13.         <li><a tabindex="-1" href="#">Second level link</a></li>
  14.         <li><a tabindex="-1" href="#">Second level link</a></li>
  15.       </ul>
  16.     </li>
  17.   </ul>
  18. </div>

效果如图 4‑6所示:

Bootstrap多级下拉菜单组件图4-6 Bootstrap多级下拉菜单组件

默认情况下,子菜单会在父菜单的右侧弹出。如果希望它在父菜单的左侧弹出,只需给相应的 <li> 元素添加 .pull-left 类即可:


  1. <li class="dropdown-submenu pull-left">
  2. </li>

效果如图 4‑7所示:

左侧弹出的Bootstrap下拉菜单组件图4-7 左侧弹出的Bootstrap下拉菜单组件

另外,子菜单默认是以下拉形式弹出。如果希望以上拉形式弹出,只需把整个下拉菜单包裹在 .dropup 的容器中即可:


  1. <div class="dropup">
  2. </div>

效果如图 4‑8所示:

Bootstrap上拉菜单组件图4-8 Bootstrap上拉菜单组件

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 成长之路 设计师:Amelia_0503 返回首页