이번에는 자바스크립트 코드를 사용해 메뉴를 구현하는 방법에 대해 알아보겠습니다.위의 코드는 클릭 시 메뉴 옵션을 보여주는 기능을 구현한 코드입니다. 코드를 하나씩 살펴보며 자세히 알아보겠습니다.
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() 함수를 호출하고 클릭한 요소의 인덱스 값을 전달합니다.
이렇게 자바스크립트를 사용해 간단한 메뉴를 구현할 수 있습니다. 코드를 이해하고 수정하며 원하는 형태의 메뉴를 만들어보세요!
'javascript' 카테고리의 다른 글
| 자바스크립트 메소드 공부(pop) (0) | 2023.04.18 |
|---|---|
| 카카오맵 API를 이용한 주소 검색 기능 만들기 (0) | 2023.04.05 |
| HTML, CSS, JavaScript를 활용한 아코디언 메뉴 구현하기 (0) | 2023.03.29 |
| API와 자바스크립트를 이용해 실시간 날씨 정보 받아오기 (0) | 2023.03.28 |
| 자바스크립트를 이용한 버튼 클릭 시 내용 보이기 (0) | 2023.03.26 |