<body><div class="navbar"><input type="checkbox" name="" id="checkbox"><!--复选框的id属性值和label元素的for属性值必须是相同的,才能够通过点击label选中复选框--><label for="checkbox"><i class="fa fa-bars"></i></label><ul><li><img src="./img/1.jpg" alt=""><span>欢迎您！管理员</span></li><li><a href="#"><i class="fa fa-home"></i><span>后台首页</span></a></li><li><a href="#"><i class="fa fa-sitemap"></i><span>商品列表</span></a></li><li><a href="#"><i class="fa fa-user"></i><span>用户列表</span></a></li><li><a href="#"><i class="fa fa-shopping-cart"></i><span>订单列表</span></a></li><li><a href="#"><i class="fa fa-windows"></i><span>功能列表</span></a></li></ul></div></body>
/*页面初始化清除元素原有的内外边距*/*{margin: 0;padding: 0;}body{overflow: hidden;} .navbar{position: relative;width: 100%;}.navbar input{display: none;}.navbar label{position: absolute;top: 0;left: 70px;/*宽度占浏览器可视区域的宽度*/width: 100%;height: 43px;padding-left: 20px;font-size: 30px;color: #5a738e;background-color: #ededed;border: 1px solid #d9dee4;cursor: pointer;transition: 0.5s;}.navbar ul{overflow: hidden;list-style: none;width: 70px;/*高度占浏览器可视区域的高度*/height: 100vh;background-color: #2a3f54;transition: 0.5s;}.navbar ul li{height: 70px;margin-bottom: 10px;}.navbar ul li:first-child{display: flex;justify-content: center;align-items: center;padding: 10px 0;}.navbar ul li:first-child img{width: 50px;border-radius: 50%;}.navbar ul li:first-child span{color: #fff;white-space: nowrap;display: none;}.navbar ul li a{display: flex;justify-content: center;align-items: center;flex-direction: column;color: #d1d1d1;text-decoration: none;width: 100%;height: 100%;}.navbar ul li a i{font-size: 25px;margin-bottom: 10px;}.navbar ul li a span{font-size: 10px;white-space: nowrap;}.navbar ul li a:hover{color: #fff;background-color: #35495d;}/*: checked选择器判断复选框是否被选中*Ⅰ/*+是相邻兄弟选择器找到了input的下一个兄弟label */.navbar input:checked + label{left: 200px;}/* ~也是兄弟选择器但是可以找到隔了几代的兄弟*/.navbar input:checked ~ ul{width: 200px;}.navbar input:checked ~ ul li:first-child{justify-content: flex-start;}.navbar input:checked ~ ul li:first-child span{margin-left: 14px;display: block;}.navbar input:checked ~ ul li a{flex-direction: row;justify-content: center;}.navbar input:checked ~ ul li a i{font-size: 18px;margin: 0 15px;}.navbar input:checked ~ ul li a span{font-size: 13px;}
