Navbar toggle

Navbar toggle

반응형으로 작업시 모바일의 Navbar의 메뉴들을 토글로 작업하는 경우가 있다.

• 웹에서는 토글버튼을 display:none으로 안보이게 만든다.
• 탭과 모바일에서 토글버튼은 display:block으로 보이게 만들고 메뉴는 새로 레이아웃을 잡은 상태에서 display:none
• 토글버튼 클릭시 메뉴가 보이게 로직을 만들면 된다.

//index.html

<ul class="navbar__menu">
          <li class="navbar__menu__items active" data-link='#home'>Home</li>
          <li class="navbar__menu__items" data-link='#about'>About</li>
          <li class="navbar__menu__items" data-link='#work'>My work</li>
          <li class="navbar__menu__items" data-link='#testimonial'>Testimonial</li>
        </ul>
      
      <button class="navbar__toggle-btn">
        <i class="fa-solid fa-bars"></i>
      </button>

//웹
.navbar__toggle-btn {
  position: absolute;
  top: 20px;
  right: 32px;
  font-size: 28px;
  color: var(--color-wh);
  background: 0;
  border: 0;
  display: none;
}

//타블렛, 모바일
@media screen 사이즈지정 {
.navbar__toggle-btn {
    display: block;
  }

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

//main.js
const navbarMenu = document.querySelector(".navbar__menu");
const navbarToggle = document.querySelector(".navbar__toggle-btn");

navbarToggle.addEventListener("click", () => {
  // console.log(navbarMenu);
  navbarMenu.classList.toggle("open");
});

• 메뉴와 버튼을 만들고 클릭이벤트를 적용하여 토글 클릭시 open이 적용되게 만들어준다.

.navbar__menu.open {
    display: block;
  }