---

Mobile ver. navigation menu

Click Event

JS에서 addEventListener 에 click 이벤트를 이용해 버튼으로 네비게이션 메뉴를 여닫기를 구현했다.

// .header__mobile-navigation-icon을 클릭하면 .header__mobile-navigation-slide 열기.
document
  .querySelector('.header__mobile-navigation-icon')
  .addEventListener('click', () => {
    document.querySelector(
      '.header__mobile-navigation-slide'
    ).style.visibility = 'visible';
    document.querySelector('.header__mobile-navigation-slide').style.width =
      '60%';
  });

// .header__mobile-navigation-close을 클릭하면 .header__mobile-navigation-slide 닫기.
document
  .querySelector('.header__mobile-navigation-close')
  .addEventListener('click', () => {
    document.querySelector(
      '.header__mobile-navigation-slide'
    ).style.visibility = 'hidden';
    document.querySelector('.header__mobile-navigation-slide').style.width =
      '0px';
  });

Transition

CSS transition 을 이용해서 여닫는 효과를 주었다.
duration 이 너무 길면 답답해서 50ms로 빠르게 설정했다.

.header__mobile-navigation-slide {
  transition-duration: 50ms;
  transition-timing-function: ease-in;
}

닫기 버튼만으로 충분할까?

충분하지 않다.
메뉴를 닫기 위해 항상 최상단의 버튼을 클릭하면 생각보다 아주 불편하다.
엄지가 너무 바빠지고 어쩌면 두 손을 써야 할 때도 있다.
그래서 메뉴 밖을 터치하면 메뉴가 닫히는
이벤트를 추가했다.

document.querySelector('main').addEventListener('click', () => {
  if (
    (document.querySelector(
      '.header__mobile-navigation-slide'
    ).style.visibility = 'visible')
  ) {
    document.querySelector(
      '.header__mobile-navigation-slide'
    ).style.visibility = 'hidden';
    document.querySelector('.header__mobile-navigation-slide').style.width =
      '0px';
  }
});

---

Repository를 보고 싶다면 GitHub을 참고하세요.