자바스크립트를 사용한 간단한 메뉴 구현하기

이번에는 자바스크립트 코드를 사용해 메뉴를 구현하는 방법에 대해 알아보겠습니다.위의 코드는 클릭 시 메뉴 옵션을 보여주는 기능을 구현한 코드입니다. 코드를 하나씩 살펴보며 자세히 알아보겠습니다.

const $menuBtn = document.querySelectorAll(".menu > li");
const $container = document.querySelectorAll(".listcon > li");
console.log($menuBtn);

우선, querySelectorAll() 함수를 사용해 ".menu > li"와 ".listcon > li"라는 클래스 이름을 가진 요소를 선택합니다. 그리고 console.log() 함수를 사용해 $menuBtn이라는 변수에 선택된 요소를 할당하고 콘솔에 출력합니다.

 

function show(num) {
  $menuBtn.forEach((a) => {
    a.classList.remove("on");
  });
  $menuBtn[num].classList.add("on");
  $container.forEach((b) => {
    b.classList.remove("on");
  });
  $container[num].classList.add("on");
}

다음으로는 show()라는 함수를 정의합니다. 이 함수는 메뉴 옵션을 보여주는 기능을 수행합니다. 함수는 num 매개변수를 받아옵니다. 이 매개변수는 클릭한 요소의 인덱스 값을 가지게 됩니다.

먼저 $menuBtn과 $container의 모든 요소에서 "on"이라는 클래스를 제거합니다. 그리고 클릭한 요소와 연관된 $menuBtn과 $container의 요소에 "on" 클래스를 추가합니다.

$menuBtn.forEach((btn, i) => {
  btn.addEventListener("click", () => {
    show(i);
  });
});

마지막으로는 $menuBtn에 클릭 이벤트 리스너를 등록합니다. 클릭 이벤트가 발생하면 show() 함수를 호출하고 클릭한 요소의 인덱스 값을 전달합니다.

이렇게 자바스크립트를 사용해 간단한 메뉴를 구현할 수 있습니다. 코드를 이해하고 수정하며 원하는 형태의 메뉴를 만들어보세요!