SOURCE

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

<aside class="box" id="test">
        <button id="btn">三</button>
        <ul>
            <li>
                <h3>蔡志强</h3>
            </li>
            <li><a href="#"> 1</a></li>
            <li><a href="#"> 2</a></li>
            <li><a href="#"> 3</a></li>
            <li><a href="#"> 4</a></li>
            <li><a href="#"> 5</a></li>
            <li><a href="#"> 6</a></li>
            <li><a href="#"> 7</a></li>
        </ul>
    </aside>
    <section>
        <h1>53号</h1>
    </section>

    * {
            margin: 0;
            padding: 0;
        }
        
        body {
            max-width: 1920px;
        }
        
        #btn {
            position: absolute;
            top: 22%;
            left: 298px;
            height: 75px;
            border: 0;
            border-left: 1px solid rgba(14, 224, 196, 0.2);
            background: rgb(33, 53, 168);
            color: rgb(16, 17, 16);
            cursor: pointer;
        }
        
        .box {
            float: left;
            position: relative;
            left: 0;
            height: 1000px;
            width: 300px;
            margin-left: 0;
            display: block;
            background-color: rgb(16, 57, 239);
            -moz-transition: margin-left 2s;
            transition: margin-left 2s;
        }
        
        aside ul li {
            height: 40px;
            line-height: 40px;
            border-top: 1px solid #ffff;
            border-bottom: 1px solid #ffff;
            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: rgb(216, 213, 26);
        }
        
        section {
            width: 100%;
            height: 100%;
            background: green;
            height: 1000px;
        }
        
        section h1 {
            text-align: center;
            border-bottom: 1px solid rgba(242, 242, 245, 0);
        }