【30天30个小项目】纯css/html实现侧边导航栏-CFANZ编程社区

css代码：

*{
    margin: 0px;
    padding: 0px;
  }
  #box{
      position: absolute;
      height: 300px;
      width: 150px;
      background-color: antiquewhite;
      right: -150px;
      text-align: center;
      position: fixed;
      transition: 0.75s;
      border-radius: 20px;
  }
  #box2{
    width: 500px;
  }
  ul li{
      list-style: none;
      overflow: hidden;
      
  }
  ul li a{
      position: relative;
      text-decoration: none;
      /* background-color: aqua; */
      display: block;
      line-height: 30px;

  }
  ul li a:hover{
      background-color:lightsteelblue;
  }
  
  #chb{
      display: none;
  }
  label{
      position: absolute;
      position: fixed;
      right: 150px;
      width: 50px;
      height: 50px;
      background-color: burlywood;
      border-radius: 15px;
      display: inline-block;
      color:orangered ;
      font-size: large;
      text-align: center;
      line-height: 45px;
      cursor: pointer;
  }
  #chb:checked ~ #box{
      right: 0px;
  }

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="daohang.css">
</head>
<body>
    <input type="checkbox" id="chb">
    <label for="chb">菜单</label>
    <div id="box">
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">用户管理</a></li>
            <li><a href="#">用户配置</a></li>
            <li><a href="#">内容</a></li>
            <li><a href="#">功能配置</a></li>
            <li><a href="#">管理员</a></li>
        </ul>
    </div>
    <div id="box2">
        <p>内容</p>
    </div>
</body>
</html>