햄버거 메뉴 이벤트

JavaScript 코드와 햄버거 메뉴 클릭(Click) 이벤트를 통해, 메뉴를 열고 닫을 수 있도록 구현해 볼게요.

변수 선언:

const hamburger = document.querySelector('.hamburger');
const navMenu = document.querySelector('.nav-menu');

hamburger: .hamburger 클래스를 가진 요소를 선택하여 hamburger 변수에 할당합니다. 이것은 햄버거 메뉴 아이콘을 참조합니다.
navMenu: .nav-menu 클래스를 가진 요소를 선택하여 navMenu 변수에 할당합니다. 이것은 전체 내비게이션 메뉴를 참조합니다.

이벤트 리스너 추가:

hamburger.addEventListener('click', mobileMenu);

mobileMenu 함수:

function mobileMenu() {
  hamburger.classList.toggle('active');
  navMenu.classList.toggle('active');
}

이 함수는 호출될 때마다 hamburger와 navMenu 요소의 'active' 클래스를 토글(toggle, 하나의 값으로부터 다른 값으로 전환)합니다.

클래스가 이미 존재한다면 제거되고, 없다면 추가됩니다. 이렇게 하면 CSS에서 정의한 .active 스타일이 적용되거나 제거됩니다.

closeMenu 함수:

function closeMenu() {
  hamburger.classList.remove('active');
  navMenu.classList.remove('active');
}

이 함수는 hamburger와 navMenu 요소에서 'active' 클래스를 명시적으로 제거합니다. 현재 주어진 코드에서 이 함수는 호출되지 않았지만, 필요에 따라 다른 곳에서 메뉴를 닫을 때 사용할 수 있습니다.

요약하면, 사용자가 햄버거 아이콘을 클릭할 때마다 메뉴가 열리거나 닫히는 동작을 구현하기 위한 코드입니다. 'active' 클래스의 추가 및 제거를 통해 CSS에서 정의된 스타일 변화가 발생하며, 이를 통해 메뉴의 표시/숨김이 제어됩니다.

다음 내용이 궁금하다면?

코드프렌즈 PLUS 멤버십 가입 or 강의를 등록해 주세요!