Guidelines
Practice
햄버거 메뉴 이벤트
JavaScript 코드와 햄버거 메뉴 클릭(Click) 이벤트를 통해, 메뉴를 열고 닫을 수 있도록 구현해 볼게요.
변수 선언:
const hamburger = document.querySelector('.hamburger'); const navMenu = document.querySelector('.nav-menu');
hamburger
:.hamburger
클래스를 가진 요소를 선택하여hamburger
변수에 할당합니다. 이것은 햄버거 메뉴 아이콘을 참조합니다.navMenu
:.nav-menu
클래스를 가진 요소를 선택하여navMenu
변수에 할당합니다. 이것은 전체 내비게이션 메뉴를 참조합니다.
이벤트 리스너 추가:
hamburger.addEventListener('click', mobileMenu);
hamburger
아이콘에 '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에서 정의된 스타일 변화가 발생하며, 이를 통해 메뉴의 표시/숨김이 제어됩니다.
Guidelines
AI Tutor
Publish
Design
Upload
Notes
Favorites
Help