html可伸缩侧边栏

演示地址：http://runjs.cn/detail/jmoullpw

1.HTML代码

        三
        

            

                
ZZES
            
            
MENU TITLE 1
            
MENU TITLE 2
            
MENU TITLE 3
            
MENU TITLE 4
            
MENU TITLE 5
            
MENU TITLE 6
            
MENU TITLE 7
        
    
    

        
Main Content
    

2.CSS代码

        * {
            margin: 0;
            padding: 0;
        }
        
        body {
            max-width: 1920px;
        }
        
        #btn {
            position: absolute;
            top: 22%;
            left: 298px;
            height: 75px;
            border: 0;
            border-left: 1px solid rgb(23, 32, 43, 0.2);
            background: #AA3344;
            color: #fff;
            cursor: pointer;
        }
        
        .box {
            float: left;
            position: relative;
            left: 0;
            height: 1000px;
            width: 300px;
            margin-left: 0;
            display: block;
            background-color: #a34;
            -moz-transition: margin-left 2s;
            transition: margin-left 2s;
        }
        
        aside ul li {
            height: 40px;
            line-height: 40px;
            border-top: 1px solid #fff;
            border-bottom: 1px solid #fff;
            list-style-type: none;
            text-align: center;
        }
        
        aside ul li a {
            width: 100%;
            height: 100%;
            text-decoration-line: none;
            color: #fff;
            display: block;
        }
        
        aside ul li a:hover {
            background: #d3d;
        }
        
        section {
            width: 100%;
            height: 100%;
            background: #d4d4d4;
            height: 1000px;
        }
        
        section h1 {
            text-align: center;
            border-bottom: 1px solid #fff;
        }

3.JavaScript代码

        var box = document.getElementById("test")
        var btn = document.getElementById("btn")
        btn.onclick = function() {
            if (box.offsetLeft == 0) {
                box.style['margin-left'] = -300 + "px"
            } else {
                box.style['margin-left'] = 0 + "px"
            }
        }

4.右侧侧边栏的问题

写右侧侧边栏的时候，使用margin-right,会发先页面右侧溢出
这是只要再body里加入
overflow-x:hidden;即可

5.另一个写法

使用定位的方式
1）HTML代码

    

        

            
list
            
list
            
list
            
list
            
list
            
list
        
    
    
        
            打开/关闭右侧侧边栏
        
    

2）CSS样式

       body {
            position: relative;
            left: 0;
            padding: 0;
            margin: 0;
            /*overflow-x:hidden;*/
        }
        
        aside {
            width: 300px;
            height: 100%;
            position: fixed;
            right: 0;
            top: 0;
            background: #d4d4d4;
            transition: right 2s ease;
        }
        
        .open {
            right: 0px;
        }
        
        .close {
            right: -300px;
        }

3）JS代码

        var aside = document.getElementById("aside")

        function toggle() {
            if (aside.offsetLeft == 1066) {
                aside.setAttribute("class", "close")
            } else {
                aside.setAttribute("class", "open")
                console.log("not in")
            }
        }

6.侧边栏缩入，保留小图标

原理就是，将不要显示的display:none;掉，然后将侧边栏宽度减小，修改一些样式即可
演示地址：http://runjs.cn/detail/dopafak1

1）html代码

    

        三
        

            

                

                    LOGO
                

            
            

                ![](icon.png) and List
            
            

                ![](icon.png) and List
            
            

                ![](icon.png) and List
            
            

                ![](icon.png) and List
            
            

                ![](icon.png) and List
            
        
    

2）JavaScript代码

3）CSS代码

* {
    padding: 0;
    margin: 0;
}

body {
    overflow-x: hidden;
    position: absolute;
    height: 100%;
    width: 100%;
}

a {
    text-decoration-line: none;
    color: #fff;
}

aside {
    height: 100%;
    width: 300px;
    position: relative;
    left: 0;
    top: 0;
    background: #243747;
    transition: width .5s;
}

aside .first {
    height: 20px;
    text-align: center;
    padding-top: 20px;
    padding-bottom: 35px;
}

aside .first .logo {
    color: #243747;
    font-size: 30px;
    background: lightcyan;
    border-radius: 20px;
    transition: color 2s;
}

aside .first .logo:hover {
    color: crimson;
}

aside ul li {
    width: 100%;
    list-style-type: none;
    padding-top: 5px;
}

aside ul li a {
    display: block;
    padding-left: 20px;
    text-align: left;
    color: #fff;
    transition: color 2s;
}

aside .listtext {
    font-size: 30px;
    display: inline-block;
}

aside ul li a:hover {
    color: #000;
    background: lightblue;
}

.icon-package {
    width: 30px;
    height: 30px;
}

.btn {
    border-radius: 5px;
    border: 0;
    background: #243747;
    color: #fff;
    position: absolute;
    top: 50%;
    right: -12px;
    height: 44px;
    cursor: pointer;
}


/*mini*/

.minibody .listtext {
    display: none;
}

.minibody aside {
    width: 40px;
    text-align: center;
}

.minibody aside ul li a {
    padding-left: 0;
}

.minibody aside .first .logo {
    font-size: 12px;
}