e2

滴滴侠,fai抖
  博客园 :: 首页 :: 博问 :: 闪存 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理 ::
Bootstrap 3的多级下拉菜单示例

Bootstrap 虽好，但对于复杂的界面，还是有N多组件需要自己扩展，并且要往简洁、大气的Bootstrap界面上靠，着实要费一些功夫。下面分享一个Bootstrap 3的多级下拉菜单，无需第三方Js脚本，复制后直接可用。

 

[html] view plain copy
print?
  1. <!DOCTYPE HTML>  
  2. <html lang="zh-CN">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>Bootstrap 3 的多级下拉菜单示例</title>  
  6.     <script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>  
  7.     <link rel="stylesheet" href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css"/>  
  8.     <script type="text/javascript" src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>  
  9.     <style type="text/css">  
  10.         .dropdown-submenu {  
  11.             position: relative;  
  12.         }  
  13.         .dropdown-submenu > .dropdown-menu {  
  14.             top: 0;  
  15.             left: 100%;  
  16.             margin-top: -6px;  
  17.             margin-left: -1px;  
  18.             -webkit-border-radius: 0 6px 6px 6px;  
  19.             -moz-border-radius: 0 6px 6px;  
  20.             border-radius: 0 6px 6px 6px;  
  21.         }  
  22.         .dropdown-submenu:hover > .dropdown-menu {  
  23.             display: block;  
  24.         }  
  25.         .dropdown-submenu > a:after {  
  26.             display: block;  
  27.             content: " ";  
  28.             float: right;  
  29.             width: 0;  
  30.             height: 0;  
  31.             border-color: transparent;  
  32.             border-style: solid;  
  33.             border-width: 5px 0 5px 5px;  
  34.             border-left-color: #ccc;  
  35.             margin-top: 5px;  
  36.             margin-right: -10px;  
  37.         }  
  38.         .dropdown-submenu:hover > a:after {  
  39.             border-left-color: #fff;  
  40.         }  
  41.         .dropdown-submenu.pull-left {  
  42.             float: none;  
  43.         }  
  44.         .dropdown-submenu.pull-left > .dropdown-menu {  
  45.             left: -100%;  
  46.             margin-left: 10px;  
  47.             -webkit-border-radius: 6px 0 6px 6px;  
  48.             -moz-border-radius: 6px 0 6px 6px;  
  49.             border-radius: 6px 0 6px 6px;  
  50.         }  
  51.     </style>  
  52. </head>  
  53. <body>  
  54. <div class="container">  
  55.     <div class="row">  
  56.         <h2>Bootstrap 3多级下拉菜单</h2>  
  57.         <hr>  
  58.         <div class="dropdown">  
  59.             <a id="dLabel" role="button" data-toggle="dropdown" class="btn btn-primary" data-target="#"  
  60.                href="javascript:;">  
  61.                 下拉多级菜单 <span class="caret"></span>  
  62.             </a>  
  63.             <ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu">  
  64.                 <li><a href="javascript:;">一级菜单</a></li>  
  65.                 <li><a href="javascript:;">一级菜单</a></li>  
  66.                 <li class="divider"></li>  
  67.                 <li class="dropdown-submenu">  
  68.                     <a tabindex="-1" href="javascript:;">一级菜单</a>  
  69.                     <ul class="dropdown-menu">  
  70.                         <li><a tabindex="-1" href="javascript:;">二级菜单</a></li>  
  71.                         <li class="divider"></li>  
  72.                         <li class="dropdown-submenu">  
  73.                             <a href="javascript:;">二级菜单</a>  
  74.                             <ul class="dropdown-menu">  
  75.                                 <li><a href="javascript:;">三级菜单</a></li>  
  76.                             </ul>  
  77.                         </li>  
  78.                     </ul>  
  79.                 </li>  
  80.             </ul>  
  81.         </div>  
  82.     </div>  
  83. </div>  
  84. </body>  
  85. </html>  


posted on 2018-03-20 22:45  纯黑Se丶  阅读(373)  评论(0)  编辑  收藏  举报