这里使用的图标来自于：http://www.fontawesome.com.cn/faicons/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../static/font-awesome-4.7.0/css/font-awesome.min.css">
</head>
<style>
* {
padding: 0;
margin: 0;
list-style: none;
text-decoration: none;
}
.sidebar {
position: fixed;
left: -200px;
width: 200px;
height: 100%;
background: #084561;
transition: all .5s ease;
}
.sidebar .top {
font-size: 22px;
color: #fff;
text-align: center;
height: 60px;
line-height: 60px;
background-color: rgb(14, 44, 70);
user-select: none;
}
.sidebar ul a {
display: block;
height: 100%;
width: 100%;
text-align: center;
line-height: 45px;
font-size: 18px;
color: #fff;
box-sizing: border-box;
border-top: 1px solid rgba(255, 255, 255, .1);
border-bottom: 1px solid rgb(17, 73, 118);
transition: .4s;
}
ul li:hover a {
padding-left: 30px;
color: #5587f4;
border-left: 5px solid #5587f4;
transition: all 0.5s;
}
.sidebar ul a i {
margin-right: 16px;
}
#check {
display: none;
}
label #btn,
label #cancel {
position: fixed;
cursor: pointer;
background-color: #0c587e;
border-radius: 3px;
}
label #btn {
left: 5px;
top: 7px;
font-size: 25px;
color: #fff;
padding: 6px 10px;
transition: all .5s;
}
label #cancel {
z-index: 1;
left: -145px;
top: 10px;
font-size: 25px;
color: rgb(188, 190, 223);
padding: 4px 9px;
transition: all .5s ease;
}
#check:checked~.sidebar {
left: 0;
}
#check:checked~label #btn {
left: 10px;
opacity: 0;
pointer-events: none;
}
#check:checked~label #cancel {
left: 150px;
}
.content {
background: url(../static/img/bg/68.png) no-repeat;
background-position: center;
background-size: cover;
height: 100vh;
transition: all .5s;
display: flex;
justify-content: space-around;
}
#check:checked~.content {
margin-left: 200px;
}
.item {
width: 30%;
height: 300px;
background-color: deepskyblue;
}
</style>
<body>
<input type="checkbox" id="check">
<label for="check">
<i class="fa fa-bars" id="btn"></i>
<i class="fa fa-times" id="cancel"></i>
</label>
<div class="sidebar">
<div class="top">Hi~</div>
<ul>
<li><a href="#"><i class="fa fa-address-book"></i>菜单管理</a></li>
<li><a href="#"><i class="fa fa-telegram"></i>商品分类</a></li>
<li><a href="#"><i class="fa fa-address-book"></i>用户管理</a></li>
<li><a href="#"><i class="fa fa-telegram"></i>订单管理</a></li>
<li><a href="#"><i class="fa fa-address-book"></i>关于我们</a></li>
</ul>
</div>
<div class="content">
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
</div>
</body>
</html>
