Bootstrap 3多级下拉菜单实例

来源：动视网责编：小采时间：2020-11-27 22:24:56

Bootstrap 3多级下拉菜单实例

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

推荐度：

点击下载本文 文档为doc格式

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

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>

Bootstrap 3多级下拉菜单实例

推荐度：

点击下载本文 文档为doc格式

标签：实例 Bootstrap 多级下拉菜单

热门焦点

Bootstrap 3多级下拉菜单实例

Bootstrap 3多级下拉菜单实例

Bootstrap 3多级下拉菜单实例

最新推荐

猜你喜欢

热门推荐