jQuery 로 메뉴 접었다~ 펼쳤다~ 구현하기

jQuery 를 이용하면 드럽게 복잡해질 자바스크립트가 매우매우매우매우매우 심플해 진다. 간단한 몇 라인의 코딩만으로 쉽게 간지나는 것을 맨들 수 있다.

고것을 설명하기 위해 접었다 펼쳐졌다 하는 간단한 메뉴를 만들어 보았다. 본인이 디자이너가 아닌 관계로 화면은 쫌 그지같지만 css 만 적용시키면 쓸만한 있어 보이는 메뉴를 바로 맨들 수 있다.

대충 요렇게 하는 것이다 라고 설명을 하는 것이니 디자인 과감히 생략한다.

우선 처음으로 맨들어볼 메뉴는 요렇다.( 클릭하면 접었다 펼쳐졌다 접었다 펼쳐졌다 함 )

• • 메뉴1-1
  • 메뉴1-2
  • 메뉴1-3
  • 메뉴1-4
  • 메뉴1-5
  • 메뉴1-6
• • 메뉴2-1
  • 메뉴2-2
  • 메뉴2-3
  • 메뉴2-4
  • 메뉴2-5
  • 메뉴2-6

요런 모양을 맨들기 위한 html 마크업은 요렇게~ html 태그에 onclick=""; 어쩌고 하는 지저분한 자바스크립트 하나 안들어간 순결하고 *(-_-)* 깔끔한 마크업이다.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

<div>     <ul>         <li class="menu">             <a><img src="" alt="상위메뉴이미지1"/></a>             <ul class="hide">                 <li>메뉴1-1</li>                 <li>메뉴1-2</li>                 <li>메뉴1-3</li>                 <li>메뉴1-4</li>                 <li>메뉴1-5</li>                 <li>메뉴1-6</li>             </ul>         </li>           <li class="menu">             <a><img src="" alt="상위메뉴이미지2"/></a>             <ul class="hide">                 <li>메뉴2-1</li>                 <li>메뉴2-2</li>                 <li>메뉴2-3</li>                 <li>메뉴2-4</li>                 <li>메뉴2-5</li>                 <li>메뉴2-6</li>             </ul>         </li>     </ul> </div>

스타일은 요정도로만

1 2 3 4

<style>     .menu a{cursor:pointer;}     .menu .hide{display:none;} </style>

중요한 jQuery 를 이용한 자바스크립 소스 부분이다. 심플스럽기 서울역에 그지없다. 주석을 빼면 3~4줄 정도밖에 안된다. 아주 짧으면서도 의미가 쏙쏙 들어오는!

1 2 3 4 5 6 7 8 9 10 11

<script>     // html dom 이 다 로딩된 후 실행된다.     $(document).ready(function(){         // memu 클래스 바로 하위에 있는 a 태그를 클릭했을때         $(".menu>a").click(function(){             // 현재 클릭한 태그가 a 이기 때문에             // a 옆의 태그중 ul 태그에 hide 클래스 태그를 넣던지 빼던지 한다.             $(this).next("ul").toggleClass("hide");         });     }); </script>

그냥 뿟뿟 나타났다 사라지는게 허접스럽게 느껴진다면 여기서 한단계 더 나아가

클릭했을때 보드랍게 슬라이딩 되면서 나타났다 사라지는 것을 맨들어 보자. 마크업과 스타일은 손댈필요 없이 자바스크립만 요래 살짝 바꿔 주면 된다.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

<script>     // html dom 이 다 로딩된 후 실행된다.     $(document).ready(function(){         // menu 클래스 바로 하위에 있는 a 태그를 클릭했을때         $(".menu>a").click(function(){             var submenu = $(this).next("ul");               // submenu 가 화면상에 보일때는 위로 보드랍게 접고 아니면 아래로 보드랍게 펼치기             if( submenu.is(":visible") ){                 submenu.slideUp();             }else{                 submenu.slideDown();             }         });     }); </script>

 바꾼결과( 클릭해 보셈 )

• • 메뉴1-1
  • 메뉴1-2
  • 메뉴1-3
  • 메뉴1-4
  • 메뉴1-5
  • 메뉴1-6
• • 메뉴2-1
  • 메뉴2-2
  • 메뉴2-3
  • 메뉴2-4
  • 메뉴2-5
  • 메뉴2-6

그렇다면 마지막으로 클릭했을때의 기능은 남겨두고 마우스가 오버되면 메뉴가 자동으로 펼쳐지게 맨들어 보자. 자바스크립트를 살짝 요래 수정하면 된다.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

<script>     $(document).ready(function(){         $(".menu>a").click(function(){             var submenu = $(this).next("ul");               // submenu 가 화면상에 보일때는 위로 보드랍게 접고 아니면 아래로 보드랍게 펼치기             if( submenu.is(":visible") ){                 submenu.slideUp();             }else{                 submenu.slideDown();             }         }).mouseover(function(){             $(this).next("ul").slideDown();         });     }); </script>

 바꾼결과( 마우스를 올려 보셈 )

• • 메뉴1-1
  • 메뉴1-2
  • 메뉴1-3
  • 메뉴1-4
  • 메뉴1-5
  • 메뉴1-6
• • 메뉴2-1
  • 메뉴2-2
  • 메뉴2-3
  • 메뉴2-4
  • 메뉴2-5
  • 메뉴2-6

진짜 진짜 마지막으로,

맨처음 뜰때 부터 두번째 메뉴가 펼쳐진 상태로 뜨게 하고 싶다면? 간단하게 두번째 서브메뉴 ul 에 지정된 hide 클래스를 지우면 되지만,

자바스크립트적인 방법으로는 요렇게 하면 된다.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

<script>     $(document).ready(function(){         $(".menu>a").click(function(){             var submenu = $(this).next("ul");               // submenu 가 화면상에 보일때는 위로 보드랍게 접고 아니면 아래로 보드랍게 펼치기             if( submenu.is(":visible") ){                 submenu.slideUp();             }else{                 submenu.slideDown();             }         }).mouseover(function(){             $(this).next("ul").slideDown();         });             // menu class 중에 두번째 있는 menu 의 하위에 있는 a태그에 클릭 이벤트를 발생시킨다.         $(".menu:eq(1)>a").click();     }); </script>

2011/11/15 - [Javascript 예제] - jQuery 로 해보는 체크박스(checkbox) 전체선택, 선택해제 예제

2011/11/11 - [Javascript 예제] - jQuery로 테이블 tr 동적으로 추가,삭제 하기 v2

2011/11/11 - [Javascript 예제] - jQuery로 테이블 tr 동적으로 추가,삭제 하기

2011/11/07 - [jQuery Plugin] - 자작 훌러그인 : jQuery blingHover v0.1 (링크 롤오버시 텍스트 컬러를 보드랍게 바꿔주기-_-)

2011/09/19 - [jQuery Plugin] - 자작 훌러그인 : jQuery monthPicker Plugin v0.1