슬라이딩 메뉴 보이기/감추기

        
            body { max-width: 960px; margin: 0 auto; }

            .sliding-menu {
                position: relative;
                overflow: hidden;
            } .sliding-actions { /* 메뉴 숨김으로 시작 */
                position: absolute; top: 0; right: 0; width: 300px; height: auto;
                padding: 2em; border: grey solid 5px; background: rgb(182 189 166 / 0.5);
                float: right;
                transform: translateX(calc(300px + 4em +  10px)); /* 메뉴 너비 + 양쪽 패딩 + 양쪽 테두리 */
                transition: all 500ms linear; /* 트랜지션(전환) 효과 */
            } .sliding-actions.display { /* 메뉴 펼치기 */
                transform: translateX(0);
                transition: all 1000ms linear; /* 같은 값으로 설정한다면; 생략해도 된다! */
                z-index: 1; /* 메뉴가 본문 내용의 위로 올라오도록 한다 */
            }
        
    

        
            const sidebar= document.getElementById('sliding-sidebar');

            document.getElementById('sliding-show').addEventListener('click', () => {
                sidebar.classList.toggle('display');
            });