html可伸缩侧边栏 - 码农教程

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

1.HTML代码

<aside class="box" id="test">
        <button id="btn">三</button>
        <ul>
            <li>
                <h3>ZZES</h3>
            </li>
            <li><a href="#">MENU TITLE 1</a></li>
            <li><a href="#">MENU TITLE 2</a></li>
            <li><a href="#">MENU TITLE 3</a></li>
            <li><a href="#">MENU TITLE 4</a></li>
            <li><a href="#">MENU TITLE 5</a></li>
            <li><a href="#">MENU TITLE 6</a></li>
            <li><a href="#">MENU TITLE 7</a></li>
        </ul>
    </aside>
    <section>
        <h1>Main Content</h1>
    </section>

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代码

    <aside id="aside">
        <ul>
            <li>list</li>
            <li>list</li>
            <li>list</li>
            <li>list</li>
            <li>list</li>
            <li>list</li>
        </ul>
    </aside>
    <position>
        <button onclick="toggle()">
            打开/关闭右侧侧边栏
        </button>
    </position>

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代码

<body>
    <aside>
        <button class="btn" onclick="list()">三</button>
        <ul>
            <li class="first">
                <div class="logo">
                    LOGO
                </div>

            </li>
            <li>
                <a href="">![](icon.png)<span class="listtext"> and List</span></a>
            </li>
            <li>
                <a href="">![](icon.png)<span class="listtext"> and List</span></a>
            </li>
            <li>
                <a href="">![](icon.png)<span class="listtext"> and List</span></a>
            </li>
            <li>
                <a href="">![](icon.png)<span class="listtext"> and List</span></a>
            </li>
            <li>
                <a href="">![](icon.png)<span class="listtext"> and List</span></a>
            </li>
        </ul>
    </aside>
</body>

2）JavaScript代码

    <script>
        var body = document.getElementsByTagName("body")[0]
        var aside = document.getElementsByTagName("aside")[0]

        function list() {
            if (aside.clientWidth <= 40) {
                body.className = ""
            } else if (aside.clientWidth > 40) {
                console.log("side")
                body.className = "minibody"
            }

        }
    </script>

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;
}