【jQuery】横から出てくるスライドメニュー

    

        

            項目1
        
        

            項目2
        
        

            項目3
        
    
    

.menu {
    width: 200px;
    height: 100vh; /* メニューの縦は画面一杯に伸ばす */

    background-color: #ccc;

    position: fixed;
    top: 0;
    left: -200px; /* メニューが閉じているときは画面外に出す */

    transition: 0.3s;
}

.menu.open {
    left: 0; /* メニューを開くと画面内に表示される */
    transition: 0.3s;
}


.menu-list {
    width: 100%;
}

.menu-list .menu-list-item {
    border-bottom: 1px solid #000;
}


.menu-list .menu-list-item a {
    display: block;
    width: 100%;
    height: 50px;
    line-height: 50px;
    text-align: center;

    transition: 0.5s;
}

.menu-list .menu-list-item a:hover {
    background-color: #eee;
    opacity: 0.5;
    transition: 0.5s;
}


button.menu-toggle {
    border: none;  /* 枠線を消す */
    outline: none; /* クリックしたときに表示される枠線を消す */

    width: 100px;
    height: 50px;
    background-color: #eee;

    cursor: pointer;

    /* メニューボタンの配置 */
    position: absolute;
    top: 100px;
    left: calc(200px - 50px * 0.5); /* メニューの幅 - メニューボタンの高さの半分 */
    transform: rotate(90deg); /* メニューボタンを縦にする */
}

button.menu-toggle:after {
    content : 'OPEN';
}

button.menu-toggle.open:after {
    content : 'CLOSE';
}

$(function(){
    /*
        メニューの開閉
    */
    $('button.menu-toggle').click(function() {
        $('button.menu-toggle').toggleClass('open');
        $('div.menu').toggleClass('open');
    });
});