CSS 토글 메뉴 자바스크립트를 사용하여 만들기

토글 메뉴라고 한다면 숨겨져있던 메뉴가 나타나고 다시 없어지는 것을 말합니다. 여기서 핵심은 자바스크립트를 이용하여 기능을 구현한다는 것입니다. 자바스크립트도 ES6 문법을 이용하여 만들어보겠습니다.

이 글에서 CSS 토글 메뉴 자바스크립트를 사용하여 기능을 구현해보도록 하겠습니다.

CSS 토글 메뉴 자바스크립트를 사용하여 만들기
CSS 토글 메뉴 자바스크립트를 사용하여 만들기

목차


기능 구현 코드

 <nav>
      <h2>토글 메뉴 만들기</h2>
      <ul>
        <li id="menu" style="cursor: pointer">포털사이트</li>
        <ul id="subMenu" class="sub-menu">
          <li>네이버</li>
          <li>다음</li>
        </ul>
      </ul>
</nav>
.sub-menu {
  display: none;
}
.active {
  display: block;
}
const RESULT = document.querySelector("#menu");
let subMenu = document.querySelector("#subMenu");

toggleFunction = (v) => {
  if (v.classList[1] === "active") {
    v.classList.remove("active");
  } else {
    v.classList.add("active");
  }
};

let toggleClicks = () => {
  toggleFunction(subMenu);
};

RESULT.addEventListener("click", toggleClicks);

자바스크립트 설명

const RESULT = document.querySelector('#menu');
let subMenu = document.querySelector('#subMenu');

HTML에서 두 개의 id 값을 가져와서 각각 RESULT와 subMenu에 저장합니다.

RESULT.addEventListener('click',toggleClicks);

‘포탈사이트’라는 문장을 클릭하면 toggleClicks라는 함수가 실행됩니다.

let toggleClicks = () =>{
  toggleFunction(subMenu);
}

toggleClicks 함수에는 toggleFunction 함수를 실행하도록 하는데 이때 숨겨져 있는 subMenu 값을 매개변수로 넣어줍니다.

toggleFunction = (v) =>{
  if(v.classList[1] === 'active'){
    v.classList.remove('active');
  }else{
    v.classList.add('active');
  }
}

subMenu 값인 매개변수를 ‘v’로 전달했습니다. if 문을 사용하여 active가 있으면 지워지고 active가 없으면 추가해줍니다. 이 코드가 토글 메뉴의 핵심입니다.

이상으로 CSS 토글 메뉴 자바스크립트를 이용하여 기능을 구현해보았습니다. 코드 결과 및 실행은 이곳에서 하실 수 있습니다.

Leave a Comment