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

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

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

源码

    
    
    
    
    
    
    


    
        
            
            
            
                
            
            
                菜单栏

                
                
                     菜单项一
                
                
                    小菜单1
                    小菜单2
                    小菜单3


                

                
                
                     菜单项二
                
                
                    小菜单1
                    小菜单2
                    小菜单3


                

                
                
                     菜单项三
                
                
                    小菜单1
                    小菜单2
                    小菜单3