토글 메뉴라고 한다면 숨겨져있던 메뉴가 나타나고 다시 없어지는 것을 말합니다. 여기서 핵심은 자바스크립트를 이용하여 기능을 구현한다는 것입니다. 자바스크립트도 ES6 문법을 이용하여 만들어보겠습니다.
이 글에서 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 토글 메뉴 자바스크립트를 이용하여 기능을 구현해보았습니다. 코드 결과 및 실행은 이곳에서 하실 수 있습니다.