jQuery 자바스크립트로 아코디언 스타일 드롭다운 메뉴 만들기
오늘도 유익한 자바스크립트를 하나 배웠습니다. CSS로 메뉴 스타일을 꾸미는 방법들은 앞서 2단 및 3단 드롭다운 메뉴를 만드는 부분에서 충분히 설명을 드렸습니다. 이번에는 자연스럽게 아래로 쓸려 내려오는 아코디언 스타일의 2단 메뉴 입니다.
<nav>
<div id="nav">
<ul class="main">
<li><a href="#">MAIN 01</a></li>
<li><a href="#">MAIN 02</a>
<ul class="sub">
<li><a href="#">SUB 01</a></li>
<li><a href="#">SUB 02</a></li>
<li><a href="#">SUB 03</a></li>
<li><a href="#">SUB 04</a></li>
</ul>
</li>
<li><a href="#">MAIN 03</a>
<ul class="sub">
<li><a href="#">SUB 05</a></li>
<li><a href="#">SUB 06</a></li>
<li><a href="#">SUB 07</a></li>
</ul>
</li>
</ul>
</div>
</nav>
먼저 HTML 부분 입니다. 메인 메뉴는 가로 스타일이며, 서브 메뉴는 세로 형태 입니다. 서브메뉴가 길어야 아코디언 효과를 제대로 만끽할 수 있으니까요. 다음은 CSS 스타일 부분 입니다.
이 부분에 대한 설명은 방금도 말씀드렸듯 전시간에 메뉴 구성하는 방법에 대한 강좌에서 설명을 드렸으니 아직 잘 이해가 안 되신다면 아래의 글들을 먼저 정독해 주시기 바랍니다.
이제 여기에서 아코디언 애니메이션 효과를 주기 위해서 제이쿼리를 사용하게 됩니다. 근데 이상하게도 이 방법이 최신 버전에서는 사용이 되지 않습니다. jQuery 1.8.1 버전에서 동작합니다. 참고해 주시기 바랍니다. 해당 버전에 대한 웹페이지는 여기를 누르시면 바로 이동하실 수 있습니다. 다운을 받으시던지 아니면 head 안쪽에 link를 걸어주시면 됩니다. JavaScript 구성은 다음과 같습니다.
이렇게 해주시면 됩니다. 선택자를 유의해 주세요. 설명하자면 .main 의 클래스값을 가지고 있는 ul의 자식 선택자인 li 요소에 마우스를 올리면, function 값으로 저장되고, this=이 값이 .children=자식 요소인 .sub의 클래스값을 가진 두번째 ul을 slideDown 즉, 슬라이드 다운 하겠다는 뜻이 됩니다.
중간에 있는 stop()의 의미는, 중복되는 명령어들을 처리하는 용도로, 여기에서는 마우스가 올라갔을 경우 마우스가 가만히 있으면 정확히 한번만 슬라이드다운 아코디언 메뉴가 실행되겠지만, 호버된 상태에서 조금이라도 마우스를 움직일때마다 새로운 명령으로 인식하여 슬라이드 메뉴가 계속 실행되게 됩니다. 이런 부작용을 방지하기 위해서 stop()을 넣게 됩니다. 위의 코딩대로 짜여진 결과값은 아래에서 직접 마우스를 움직이시면서 확인 가능합니다.
See the Pen Accordion Dropdown nav Menu by rgy0409 (@rgy0409) on CodePen.
이렇게 완성 됩니다. 이렇게 해서 간단하게 jQuery를 활용한 자바스크립트, CSS 스타일로 아코디언 형식의 드롭다운 메뉴를 완성하였습니다. 끝.
