效果图
代码
<!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><style>*{margin: 0;padding: 0;}input{display: none;}.navbar{position: relative;width: 100%;}label img{cursor:pointer;height: 40px;width: 40px;}label{position: absolute;display: inline-block;width: 100%;left: 65px;background-color: rgb(224, 224, 224);border:1px solid rgb(199, 199, 199);}.list{overflow: hidden;top:0;list-style: none;width: 65px;height: 100vh;background-color: rgb(0, 56, 121);}.list li{text-decoration: none;height: 70px;line-height: 70px;padding-top: 10px;/* margin-top: 10px; *//* border: 1px solid yellow; */}input:checked~ label{left: 200px;}input:checked~.list{width: 200px;}input:checked~ .list li:nth-of-type(1) span{display: inherit;}.list img{vertical-align: bottom;display: inline-block;height: 30px;width: 30px;}.list span{font-size: 10px;display: inline-block;height: 30px;line-height: 30px;width: 60px;color:rgb(221, 221, 221);font-size: 4px;text-align: left;}.list a{text-decoration: none;margin-left: 10px;flex-wrap: wrap;display: inline-block;display: flex;height: 65px;width: 75% ;justify-content: space-around;align-content: center;/* border:1px solid green; */}.list li:nth-of-type(1){/* border: 1px solid yellow; */margin-bottom: 5px;}.list li:nth-of-type(1) span{height: 45px;line-height: 45px;display: none;overflow: hidden;width: 60%;}.list li:nth-of-type(1) img{border-radius: 50%;height: 45px;width: 45px;}.list li:hover{background-color: rgba(0, 33, 80, 0.3);}input:checked ~ .list span{font-size: 14px;/* background-color: red; */}</style></head><body><div class="navbar"><input id="checkbox" type="checkbox" /><label for="checkbox"><img src="icons/1.png" /></label><ul class="list"><li><a href=""><img src="/bfs/face/6ab4b703ebd72ad1a73f0a90a002d3cc9f000a6f.jpg@150w_150h.jpg" /><span>管理员你好</span></a></li><li><a href=""><img src="icons/3.png" /><span>工具菜单</span></a></li><li><a href=""><img src="icons/4.png" /><span>商品列表</span></a></li><li><a href=""><img src="icons/5.png" /><span>用户列表</span></a></li><li><a href=""><img src="icons/6.png" /><span>订单列表</span></a></li><li><a href=""><img src="icons/6.png" /><span>功能列表</span></a></li></ul></div></body></html>
