关键目录结构
index.html
cssfont-awesome.css
index.cssfonts
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
三连博主，每天分享一个编程小技巧！