구현된 화면

JavaScript의 간단한 이벤트리스너를 통해서 오른쪽 상단 토글버튼을 누르게 되면 메뉴가 나왔다가 다시 누르면 사라지는 기능을 구현할 수 있다.

코드 내용

JavaScript
classlist.toggle()을 통해 임의의 class를 추가/제거 할 수 있다.

const menu = document.querySelector('.navbar__menu');
const icons = document.querySelector('.navbar__icons');
const toggleBtn = document.querySelector('.navbar__toggleBtn');

toggleBtn.addEventListener('click', () => {
  menu.classList.toggle('active');
  icons.classList.toggle('active');
  //menu의 클래스리스트에 'active' 클래스가 있다면 없애주고, 없다면 'active' 클래스를 추가는 역활을 한다.
});

CSS
먼저 menu, icons를 display: none;추가해서 안보이게 한 후
actvie클래스가 추가된 상태에서는 다시 보일 수 있게 diplay: flex;추가해주면 된다.

@media screen and (max-width: 768px) {
  .navbar {
    flex-direction: column;
    align-items: flex-start;
    padding: 8px 50px;
  }

  .navbar__menu {
    display: none;
    flex-direction: column;
    align-items: center;
    width: 100%;
  }

  .navbar__menu li{
    width: 100%;
    text-align: center;
  }

  .navbar__icons{
    display: none;
    justify-content: center;
    width: 100%;
  }

  .navbar__toggleBtn {
    display: flex;
    position: absolute;
    right: 30px;
    top: -1px;
  }
  
  .navbar__menu.active,
  .navbar__icons.active {
    display: flex;
  }
  
}