html+css制作侧边栏效果

2021-02-16 14:04:39 阅读：317 来源： 互联网

标签：width navbar 侧边 li ul color html css left

关键目录结构

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

html+css制作侧边栏效果

关键目录结构

关键代码展示

css