Bootstrap 3多级下拉菜单实例

2024-05-06 16:41:04

字体：大中小

来源：转载

供稿：网友

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

<!DOCTYPE HTML> <html lang="zh-CN"> <head>   <meta charset="UTF-8">   <title>Bootstrap 3 的多级下拉菜单示例</title>   <script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>   <link rel="stylesheet" href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css"/>   <script type="text/javascript" src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>   <style type="text/css">     .dropdown-submenu {       position: relative;     }     .dropdown-submenu > .dropdown-menu {       top: 0;       left: 100%;       margin-top: -6px;       margin-left: -1px;       -webkit-border-radius: 0 6px 6px 6px;       -moz-border-radius: 0 6px 6px;       border-radius: 0 6px 6px 6px;     }     .dropdown-submenu:hover > .dropdown-menu {       display: block;     }     .dropdown-submenu > a:after {       display: block;       content: " ";       float: right;       width: 0;       height: 0;       border-color: transparent;       border-style: solid;       border-width: 5px 0 5px 5px;       border-left-color: #ccc;       margin-top: 5px;       margin-right: -10px;     }     .dropdown-submenu:hover > a:after {       border-left-color: #fff;     }     .dropdown-submenu.pull-left {       float: none;     }     .dropdown-submenu.pull-left > .dropdown-menu {       left: -100%;       margin-left: 10px;       -webkit-border-radius: 6px 0 6px 6px;       -moz-border-radius: 6px 0 6px 6px;       border-radius: 6px 0 6px 6px;     }   </style> </head> <body> <div class="container">   <div class="row">     <h2>Bootstrap 3多级下拉菜单</h2>     <hr>     <div class="dropdown">       <a id="dLabel" role="button" data-toggle="dropdown" class="btn btn-primary" data-target="#"         href="javascript:;">         下拉多级菜单 <span class="caret"></span>       </a>       <ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu">         <li><a href="javascript:;">一级菜单</a></li>         <li><a href="javascript:;">一级菜单</a></li>         <li class="divider"></li>         <li class="dropdown-submenu">           <a tabindex="-1" href="javascript:;">一级菜单</a>           <ul class="dropdown-menu">             <li><a tabindex="-1" href="javascript:;">二级菜单</a></li>             <li class="divider"></li>             <li class="dropdown-submenu">               <a href="javascript:;">二级菜单</a>               <ul class="dropdown-menu">                 <li><a href="javascript:;">三级菜单</a></li>               </ul>             </li>           </ul>         </li>       </ul>     </div>   </div> </div> </body> </html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持VeVb武林网。

注：相关教程知识阅读请移步到JavaScript/Ajax教程频道。

上一篇：bootstrap实现二级下拉菜单效果

下一篇：bootstrap datetimepicker控件位置异常的解决方法