bootstrap3 侧边导航栏

最新推荐文章于 2024-09-02 08:48:21 发布

夫妻IT录

最新推荐文章于 2024-09-02 08:48:21 发布

阅读量1w

点赞数 3

分类专栏： Bootstrap3 文章标签： bootstrap3 侧边导航栏

本文链接：https://blog.csdn.net/jinxiumeihappy/article/details/78541868

版权

Bootstrap3 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.效果图 1

效果图2

2.代码

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>侧边栏</title>
		<link href="css/bootstrap.min.css" rel="stylesheet">
		<script src="js/jquery-3.0.0.min.js"></script>
		<script src="js/bootstrap.min.js"></script>
		<style type="text/css">
			a,a:hover,a:focus{
				color: #ffffff;
				text-decoration: none;
			}
			.panel-group {
				background-color: #404040;
				width: 250px;
				height: 600px;
				overflow-y: auto;
			}
			.panel-group .panel {
				background-color: #404040;
				border: none;
			}
			
			.panel-heading{
				border-top-left-radius: 0px; 
    			border-top-right-radius: 0px; 
			}
			.panel-default>.panel-heading {
				border: none;
				color: #ffffff;
				background-color: #505050;
			}
			.panel-default>.panel-heading>span{
				font-size: 10px;
			}
			.panel-default>.panel-heading:active,.panel-default>.panel-heading:hover{
				background-color: #4a8bc2;
			}
			.panel-default>.panel-heading>a:hover{
				text-decoration: none;
				background-color: #4a8bc2;
			}
			.panel-group .panel-heading+.panel-collapse>.panel-body {
				border: none;
			}
			.panel-body {
				padding: 0px;
			}
			.nav>li{
				padding: 1px 0px 0px 0px;
			}
			.nav>li>a{
				text-decoration: none;
				padding: 10px 10px 10px 35px;
			}
			.nav>li>a:hover,.nav>li>a:focus{
				background-color: #505050;
			}
		</style>
	</head>

	<body>
		<div class="panel-group" id="panelContainer">
			<div class="panel panel-default">
				<div id="header1" class="panel-heading" data-toggle="collapse" data-target="#sub1" data-parent="#panelContainer">
					<i class="glyphicon glyphicon-list-alt"></i>
					<a href="#">栏目菜单 1</a>
					<span class="glyphicon glyphicon-triangle-right pull-right"></span>
				</div>
				<div id="sub1" class="collapse panel-collapse">
					<div class="panel-body">
						<ul class="nav">
							<li>
								<a href="#"><span></span>添加栏目1</a>
							</li>
							<li>
								<a href="#">添加栏目2</a>
							</li>
							<li>
								<a href="#">添加栏目3</a>
							</li>
							<li>
								<a href="#">添加栏目4</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
			<div class="panel panel-default">
				<div id="header2" class="panel-heading" data-toggle="collapse" data-target="#sub2" data-parent="#panelContainer">
					<i class="glyphicon glyphicon-leaf"></i>
					<a href="#">栏目菜单 2</a>
					<span class="glyphicon glyphicon-triangle-right pull-right"></span>
				</div>
				<div id="sub2" class="collapse panel-collapse">
					<div class="panel-body">
						<ul class="nav">
							<li>
								<a href="#">添加栏目1</a>
							</li>
							<li>
								<a href="#">添加栏目2</a>
							</li>
							<li>
								<a href="#">添加栏目3</a>
							</li>
							<li>
								<a href="#">添加栏目4</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>

		<script>
			$(function() {
				$(".panel-heading").on("click", function(e) {
					var idLength = e.currentTarget.id.length;
					var index = e.currentTarget.id.substr(idLength - 1, idLength);
					$("#sub" + index).on('hidden.bs.collapse', function() {
						$(e.currentTarget).find("span").removeClass("glyphicon glyphicon-triangle-bottom");
						$(e.currentTarget).find("span").addClass("glyphicon glyphicon-triangle-right");
					})
					$("#sub" + index).on('shown.bs.collapse', function() {
						$(e.currentTarget).find("span").removeClass("glyphicon glyphicon-triangle-right");
						$(e.currentTarget).find("span").addClass("glyphicon glyphicon-triangle-bottom");
					})
				})
				
				$(".panel-body > .nav > li > a").on("click", function(e) {
					alert(e.currentTarget.textContent);
				});
			});
		</script>
	</body>

</html>

3.源码下载：

http://download.csdn.net/download/jinxiumeihappy/10119903