bootstrap实现经典的导航栏加内容区,外加菜单滑动特效

bootstrap实现导航栏+内容去+菜单滑动特效

今天给大家分享一个快速搭建导航页的demo,先展示一下效果图
bootstrap实现经典的导航栏加内容区,外加菜单滑动特效_第1张图片
顶部是我们logo区域,左侧是菜单栏,右侧是对应菜单的内容区域。
在写页面之前,先引入我们需要的通用css

这边我引用的不是cdn上的,所以大家可以自己根据需要引入boostrap的css即可。 话不多说,直接上代码
<body style="height: 100vh">
		<nav class="navbar navbar-dark bg-dark" style="padding-right: 0px;height: 9%;color: wheat;justify-content:flex-start">
			<a class="navbar-brand" href="#">Logo</a>
		</nav>
		<div class="container-fluid" style="height:90%">
			<div id="main" class="row" style="height:100%">
				<div id="left" class="col-md-2 bg-dark" style="height:100%;">
					<ul class="list-group list-group-flush bg-dark">
						<li class="list-group-item active bg-dark"><a class="stretched-link" href="./index.html" target="content">
								<i class="glyphicon glyphicon-home"></i>首页</a></li>
						<li class="list-group-item bg-dark"><a class="stretched-link" href="./spider-data.html" target="content">
								<i class="glyphicon glyphicon-home"></i>Page1</a></li>
						<li class="list-group-item bg-dark"><a class="stretched-link" href="./index.html" target="content">
								<i class="glyphicon glyphicon-home"></i>Page2</a></li>
						<li class="list-group-item bg-dark"><a class="stretched-link" href="./userManager.html" target="content">
								<i class="glyphicon glyphicon-home"></i>Page3</a></li>
						<li class="list-group-item bg-dark"><a class="stretched-link" href="./userInfo.html" target="content">
								<i class="glyphicon glyphicon-home"></i>Page4</a></li>
						<li class="list-group-item bg-dark"><a class="stretched-link" href="./index.html" target="content">
								<i class="glyphicon glyphicon-home"></i>Page5</a></li>
						<li class="list-group-item bg-dark"><a class="stretched-link" href="./index.html" target="content">
								<i class="glyphicon glyphicon-home"></i>Page6</a></li>
					</ul>
				</div>
				<div id="content" class="col-md-10 embed-responsive">
					<iframe name="content" class="embed-responsive-item embed-responsive-1by1" src="./index.html"></iframe>
				</div>
			</div>
		</div>
	</body>

这里我的内容区是以iframe形式载入,只需要更改菜单选项中的href路径即可,关键属性就是li标签中的target指向的我们content,实现点击菜单,显示对应页面。
当然只有bootstrap的css和上述代码还是不够的,接下里我们来写css来实现一开始我们图片的样式。
在没有写样式之前,页面应该是这个样子的。
bootstrap实现经典的导航栏加内容区,外加菜单滑动特效_第2张图片
加入我们的_index.css

* {
	margin: 0;
	padding: 0;
	list-style: none;
	text-decoration: none;
}
li.list-group-item:hover {
	background-color: rgba(0, 0, 0, 0.125) !important;
	cursor: pointer;
}

li.list-group-item.active {
	background-color: rgba(0, 0, 0, 0.1) !important;
	border-color: rgba(0, 0, 0, 0.125);
}

#main {
	margin-top: 3px;
	border-top: 1px solid rgba(0, 0, 0, 0.125);
}

#left {
	padding: 2px;
	border-right: 1px solid rgba(0, 0, 0, 0.125);
}

#content {
	padding: 2px;
}

a[target="content"] {
	color: white;
	text-decoration: none;
}

#left ul i {
	margin-right: 16px;
}

#left ul a {
	color: white;
	transition: .5s;
}

#left ul li:hover a {
	padding-left: 50px;
}

加入后样式就会变成之开头图片中的样子。
bootstrap实现经典的导航栏加内容区,外加菜单滑动特效_第3张图片
这里重点是 # left ul a 加入transition属性,使得它的会在样式更改的时候产生一个过度效果,还有一个是left ul li:hover a加入padding-left属性,使得我们鼠标移动上去时会发生一个菜单滑动会向右平移的特效,当然大家还有什么需要的样式都可以自行加入。
一个简单的导航页就这样做成啦。

你可能感兴趣的:(css)