Bootstrap3 多级下拉菜单实例

最新推荐文章于 2024-05-15 00:21:36 发布

chenque5007

最新推荐文章于 2024-05-15 00:21:36 发布

阅读量392

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/u/3936610/blog/2990262

版权

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Bootstrap3 多级下拉菜单示例</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>Bootstrap3 多级下拉菜单</h2>
				<hr>
				<div class="dropdown">
					<a id="dLabel" role="button" data-toggle="dropdown" class="btn btn-primary" data-target="#" href="#">
						多级下拉菜单 <span class="caret"></span>
					</a>
					<ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu">
						<li><a href="#">一级菜单</a></li>
						<li><a href="#">一级菜单</a></li>
						<li class="divider"></li>
						<li class="dropdown-submenu">
							<a tabindex="-1" href="#">一级菜单</a>
							<ul class="dropdown-menu">
								<li><a tabindex="-1" href="#">二级菜单</a></li>
								<li class="divider"></li>
								<li class="dropdown-submenu">
									<a href="#">二级菜单</a>
									<ul class="dropdown-menu">
										<li><a href="#">三级菜单</a></li>
									</ul>
								</li>
							</ul>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</body>
</html>

转载于:https://my.oschina.net/u/3936610/blog/2990262

chenque5007

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap3 多级下拉菜单实例

<!DOCTYPE HTML><html> <head> <meta charset="UTF-8"> <title>Bootstrap3 多级下拉菜单示例</title> <script ...
复制链接

扫一扫