slider menu

사이드 메뉴

클릭하면 사이드 메뉴가 옆에서 튀어나오게끔 구현하고 싶었다

초안

처음에는 modal 팝업을 구현하는 것 처럼 클릭하면 사이드바의 display를 none에서 block으로 바꾼 후 transform을 이용해서 왼쪽에서 나오게 구현하려했다

css부분

.sidebar{
    display: none;
    width: 20vw;
    height: 100vh;
    position: absolute;
    left : -20vw;
    top: 0;
    background-color: rgba(237 ,238 ,241, 0.7);
    box-shadow: 0 0 8px 1px #737171;
    transition: 2s;
}
.move{
    transform: translateX(20vw);
}

js의 클릭 이벤트 부분

function sideBarClickEvent(target) {
    if(target === titleSideBarElem){
        sidebarElem.style.display = 'block';
        sidebarElem.classList.toggle('move');
    }
}

문제점

사이드.mov

570.2 kB

보는 바와 같이 클릭 이벤트 안에 있는

        sidebarElem.style.display = 'block';
        sidebarElem.classList.toggle('move');

가 동시에 적용되어서 에니메이션이 적용되지 않고 창이 바로 나타나게된다

해결법

modal처럼 css를 직접 수정하려고 한 것이 오류였던 듯하다

display는 none으로 해두고 위치만 옆으로 밀어서 화면에 보이지 않는 상태로 놔두고

class를 추가해 애니메이션효과를 보면 될 것 같다

function sideBarClickEvent(target) {
    if(target === titleSideBarElem){
        sidebarElem.classList.toggle('move');
    }
}

사이드1.mov

643.4 kB

원하던 효과가 나왔다!

하지만 좀 아쉬운데 사이드 바만 옆으로 나오는 게 아니라

사이드바가 옆으로 움직인 만큼 전체 화면도 오른쪽으로 밀려나면 좀 더 상호작용하는 것 처럼 보일 것 같았다

.body-move{
    transform: translateX(20vw);
}

css를 추가해주고

  function sideBarClickEvent(target) {
      if(target === titleSideBarElem){
          sidebarElem.classList.toggle('move');
          bodyElem.classList.toggle('body-move');
      }
  }

이벤트에서 클래스를 추가해줬다

33.mov

888.6 kB

아..

한숨이 나왔지만 의외로 간단했다

클릭하게되면 화면이 20vw만큼 움직이고

사이드바가 화면의 left : 0으로 가기 때문에

우리 눈에는 사이드 바가 20vw의 지점에 있게 된다

그렇다면 사이드 바는 움직일 필요가 없는 것

sidebar-move에 관한 이벤트와 css는 다 제거하고

body-move만 남겨두었다

function sideBarClickEvent(target) {
    if(target === titleSideBarElem){
        bodyElem.classList.toggle('body-move');
    }
}

완벽해졌다

후기

사실 만들고 나니 처음에 구현했던 body 위에서 사이드 바만 나오고 들어가는게 더 인터렉티브 해 보이기도 하지만..

두가지 방법을 다 할 줄 알게 되었다는 것에 만족하기로 했다