HTML /CSS侧边导航条练习（抽屉式）

抽屉式侧边导航栏练习

白云好懒

5923人浏览 · 2022-03-14 22:31:14

白云好懒 · 2022-03-14 22:31:14 发布

今天练习了一下侧边导航条的制作，由于刚学完知识运用还不熟练，导致花了很多时间，很多地方也是重新查了笔记。还要多加练习巩固。

简单说一下制作方法，label标签和input复选框绑定，全部input设置display：none;这里我让选中时候设置菜单项高度并添加过渡，同时设置overflow:hidden;防止内容溢出（如果一开始有高度）。达到展开菜单效果，这里一开始给上高度为0，也要添加过渡，这样收回的时候也像抽屉一样了。最后让展开后的箭头图标旋转180度。

源码

<!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="./icon/font_3245116_sccgi44ux7/iconfont.css">
    <style>
        * {
          margin: 0;
           padding: 0;
           }
        .out{
            /* background-color: bisque;
             */
            background: url(./img/beij.jpg)  no-repeat ;
            background-size: cover;
            width: 100vw;
            height: 100vh;
        }
        .menu-content{
             width: fit-content; 
            /* height: 100vh;  */
            /* background-color: aquamarine; */
            position: relative;
        }
        .menu{
            width: 0px;
            height: 100vh;
            background-color: #031527;
            opacity: 0.8;
            overflow: hidden;
            /* display: flex; */
            
        }
        .title{
            width: 100px;
            height: 80px;
            margin-left: 50px;
            color: #dac5a5;
         
        }
        .menu-content>label{
          background-color: aliceblue;
          position: absolute;
          top: 50%;
          left: 95%;
          width: 25px;
          height: 25px;
          border-radius: 50%;
          z-index: 5;
         
        }
        .menu-content>label i{
            margin-left: 5px;
            
            
        }
        input#btn:checked~label{
            transform: rotateY(180deg);              /*旋转图标*/
        }
        input#btn:checked ~.menu {
            width: 200px;
            transition: 1s;
           
           



        }
        input[type="checkbox"]  {
            display: none;
        }

        div.item1-content,div.item2-content,div.item3-content{
            width: 100px;
            height: 0;
            overflow: hidden;
            transition: 0.8s;
        }
        input#item1:checked~.item1-content,  input#item2:checked~.item2-content,input#item3:checked~.item3-content{
            width: 100px;
            height: 80px;
           
            transition: 0.8s;

        }
        .menu>label>div{
            width: 100px;
            height: 20px;
            margin:5px  30px;
            font-size: larger;
            color: #9b7538;

         
        }
        .menu .item1-content,.item2-content,.item3-content{
            margin: 0 30px;
           
        }
        .menu .item1-content div,.item2-content div,.item3-content div{
            /* font-size: large; */
            color: #96866D;
            text-align: center;
            margin: 3px 0;
        }
           .menu  .item1-content>div:hover,.item2-content>div:hover,.item3-content>div:hover{
            cursor:pointer;
            background-color: rgba(12, 87, 199, 0.473);
        }
     

        
        
        
    </style>
    <link rel="stylesheet" href="./icon/font_3245116_3ejb54749e3/iconfont.css">
</head>
<body>
    <div class="out">
        <div class="menu-content">
            
            <input type="checkbox" id="btn">
            <label for="btn">
                <i class="iconfont icon-jiantouyou"></i>
            </label>
            <div class="menu">
                <div class="title"><h1>菜单栏</h1></div>

                <input type="checkbox" id="item1">
                <label for="item1">
                    <div><i class="iconfont icon-a-jiaoyifangshi2x">&nbsp;菜单项一</i></div>
                </label>
                <div class="item1-content">
                    <div>小菜单1</div>
                    <div>小菜单2</div>
                    <div>小菜单3</div>


                </div>

                <input type="checkbox" id="item2">
                <label for="item2">
                    <div><i class="iconfont icon-a-fenleitongji2x">&nbsp;菜单项二</i></div>
                </label>
                <div class="item2-content">
                    <div>小菜单1</div>
                    <div>小菜单2</div>
                    <div>小菜单3</div>


                </div>

                <input type="checkbox" id="item3">
                <label for="item3">
                    <div><i class="iconfont icon-a-dingdanguanli2x">&nbsp;菜单项三</i></div>
                </label>
                <div class="item3-content">
                    <div>小菜单1</div>
                    <div>小菜单2</div>
                    <div>小菜单3</div>


                </div>
               
                
            </div>
          
           
         





        </div>

    </div>
    
</body>
</html>