实现点击收缩侧边导航栏的最简html/css代码

基本原理：

navigation设置有宽度300px
main设置有宽度cacl(100%-300px)，left左边距300px
点击toggle div的时候，用js将navigation加上active状态，宽度改成60px，动画时间0.5s，同时，也将main的宽度改成calc(100%-60px), left左边距60px，同样动画时间
这样就可以实现点击toggle div左边导航栏动画伸缩的效果了

代码html部分：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="style2.css"/>
</head>
<body>
    <div class="container">
        <div class="navigation">
        </div>
        
        <div class="main">
            <div class="topbar">
                <div class="toggle" onclick="toggleMenu()"></div>
            </div>
        </div>
    </div>
    
    <script type="text/javascript">
        function toggleMenu () {
            let navigation = document.querySelector('.navigation')
            let main = document.querySelector('.main')
            navigation.classList.toggle('active')
            main.classList.toggle('active')
        }
    </script>
</body>
</html>

代码css部分：

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: arial;
}

body {
    overflow-x: hidden;
}

.container {
    position: relative;
    width: 100%;
}

.navigation {
    position: fixed;
    width: 300px;
    height: 100%;
    background: #003147;
    transition: 0.5s;
    overflow: hidden;
}

.navigation.active {
    width: 60px;
}

.main {
    position: absolute;
    width: calc(100% - 300px);
    left: 300px;
    min-height: 100vh;
    background: #f5f5f5;
    transition: 0.5s;
}

.main.active {
    width: calc(100% - 60px);
    left: 60px;
}

.main .topbar {
    width: 100%;
    background: #fff;
    height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.toggle {
    position: relative;
    width: 60px;
    height: 60px;
    cursor: pointer;
    background-color: red;
}

发表评论