其他分享
首页 > 其他分享> > html+css制作侧边栏效果

html+css制作侧边栏效果

作者：互联网

关键目录结构

index.html
css

font-awesome.css
index.css

fonts
images

关键代码展示

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8" />
		<title>侧边展开导航栏(全隐藏)</title>
		<!-- 事先引入的字体图标库 观看此视频之前可以看一下上个视频简介 接上个视频发的哈 -->
		<link rel="stylesheet" href="css/font-awesome.css" />
		<link rel="stylesheet" href="css/index.css" />
	</head>
	<body>
		<div class="navbar">
			<input type="checkbox" id="checkbox" />
			<label for="checkbox">
				<i class="fa fa-outdent"></i>
			</label>
			<ul>
				<li>
					<img src="images/bilibili.png" alt="" />
					<span>哔哩哔哩 (゜-゜)つロ 干杯~-</span>
				</li>
				<li>
					<a href="javascript:;">
						<i class="fa fa-home"></i>
						<span>后台首页</span>
					</a>
				</li>
				<li>
					<a href="javascript:;">
						<i class="fa fa-sitemap"></i>
						<span>商品列表</span>
					</a>
				</li>
				<li>
					<a href="javascript:;">
						<i class="fa fa-user"></i>
						<span>用户列表</span>
					</a>
				</li>
				<li>
					<a href="javascript:;">
						<i class="fa fa-shopping-cart"></i>
						<span>订单列表</span>
					</a>
				</li>
				<li>
					<a href="javascript:;">
						<i class="fa fa-windows"></i>
						<span>功能列表</span>
					</a>
				</li>
			</ul>
		</div>
	</body>
</html>

css

/* 观看此视频之前可以看一下上个视频简介 接上个视频发的哈 */
* {
	/* 初始化 清除元素的内外边距 */
	padding: 0;
	margin: 0;
	/* 盒子模型 */
	box-sizing: border-box;
}
body {
	/* 宽度占浏览器可视区域的宽度 */
	width: 100vm;
	background-color: #f2f2f2;
}
.navbar {
	/* 相对定位 */
	position: relative;
	width: 100%;
	height: 50px;
	line-height: 50px;
	background-color: #fff;
	/* 盒子阴影 */
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
}
.navbar input {
	/* 隐藏元素 */
	display: none;
}
.navbar label {
	/* 绝对定位 */
	position: absolute;
	top: 0;
	left: 200px;
	font-size: 20px;
	color: #666;
	padding-left: 20px;
	cursor: pointer;
	/* 加过渡 */
	transition: all 0.5s;
}
.navbar ul {
	position: absolute;
	top: 0;
	left: 0;
	width: 200px;
	/* 高度占浏览器可视区域的高度 */
	height: 100vh;
	background-color: #20222a;
	transition: all 0.5s;
}
.navbar ul li {
	width: 100%;
	height: 70px;
	margin-bottom: 10px;
}
.navbar ul li:first-child {
	/* 弹性布局 让图片和文字垂直+水平居中于盒子内 */
	display: flex;
	justify-content: center;
	align-items: center;
	/* 改变了盒子的主轴方向 让两个元素垂直排列 */
	flex-direction: column;
	width: 100%;
	height: 150px;
	padding: 10px;
}
.navbar ul li:first-child img {
	width: 80px;
	border-radius: 50%;
}
.navbar ul li:first-child span {
	color: #fff;
	font-size: 14px;
	/* 禁止文字换行 */
	white-space: nowrap;
}
.navbar ul li a {
	display: flex;
	align-items: center;
	width: 100%;
	height: 100%;
	color: #d2d2d2;
	/* 取消a标签的下划线 */
	text-decoration: none;
	/* 现在盒子内直接定义好左边框 不过颜色为透明色也就看不见 */
	border-left: 6px solid transparent;
}
.navbar ul li a i {
	font-size: 18px;
	margin: 0 15px;
}
.navbar ul li a span {
	font-size: 14px;
}
.navbar ul li a:hover {
	color: #fff;
	/* 这样文字和图标会被带跑不太好看 解决办法很简单 */
	/* 然后鼠标放上去变颜色就可以了 */
	border-left-color: #fb7299;
}
.navbar input:checked + label {
	left: 0;
}
.navbar input:checked + label i {
	/* 沿着y轴旋转180度 */
	transform: rotateY(180deg);
}
.navbar input:checked ~ ul {
	left: -200px;
}

完整代码请点击链接下载:
sidebar

阅读更多

三连博主，每天分享一个编程小技巧！

标签：width,navbar,侧边,li,ul,color,html,css,left
来源： https://blog.csdn.net/xiomarazark/article/details/113824112