jQuery 로 메뉴 접었다~ 펼쳤다~ 구현하기
Javascript 예제 2011. 11. 18. 01:27
고것을 설명하기 위해 접었다 펼쳐졌다 하는 간단한 메뉴를 만들어 보았다. 본인이 디자이너가 아닌 관계로 화면은 쫌 그지같지만 css 만 적용시키면 쓸만한 있어 보이는 메뉴를 바로 맨들 수 있다.
대충 요렇게 하는 것이다 라고 설명을 하는 것이니 디자인 과감히 생략한다.
우선 처음으로 맨들어볼 메뉴는 요렇다.( 클릭하면 접었다 펼쳐졌다 접었다 펼쳐졌다 함 )
요런 모양을 맨들기 위한 html 마크업은 요렇게~ html 태그에 onclick=""; 어쩌고 하는 지저분한 자바스크립트 하나 안들어간 순결하고 *(-_-)* 깔끔한 마크업이다.
<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>
스타일은 요정도로만
<style> .menu a{cursor:pointer;} .menu .hide{display:none;} </style>
중요한 jQuery 를 이용한 자바스크립 소스 부분이다. 심플스럽기 서울역에 그지없다. 주석을 빼면 3~4줄 정도밖에 안된다. 아주 짧으면서도 의미가 쏙쏙 들어오는!
<script> // html dom 이 다 로딩된 후 실행된다. $(document).ready(function(){ // memu 클래스 바로 하위에 있는 a 태그를 클릭했을때 $(".menu>a").click(function(){ // 현재 클릭한 태그가 a 이기 때문에 // a 옆의 태그중 ul 태그에 hide 클래스 태그를 넣던지 빼던지 한다. $(this).next("ul").toggleClass("hide"); }); }); </script>
그냥 뿟뿟 나타났다 사라지는게 허접스럽게 느껴진다면 여기서 한단계 더 나아가
클릭했을때 보드랍게 슬라이딩 되면서 나타났다 사라지는 것을 맨들어 보자. 마크업과 스타일은 손댈필요 없이 자바스크립만 요래 살짝 바꿔 주면 된다.
<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>
바꾼결과( 클릭해 보셈 )
그렇다면 마지막으로 클릭했을때의 기능은 남겨두고 마우스가 오버되면 메뉴가 자동으로 펼쳐지게 맨들어 보자. 자바스크립트를 살짝 요래 수정하면 된다.
<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>
바꾼결과( 마우스를 올려 보셈 )
진짜 진짜 마지막으로,
맨처음 뜰때 부터 두번째 메뉴가 펼쳐진 상태로 뜨게 하고 싶다면? 간단하게 두번째 서브메뉴 ul 에 지정된 hide 클래스를 지우면 되지만,
자바스크립트적인 방법으로는 요렇게 하면 된다.
<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
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
'Javascript 예제' 카테고리의 다른 글
jQuery 로 페이지를 벗어날때 확인창 띄우기 (1) | 2012.06.08 |
---|---|
jQuery 로 원하는 갯수만큼 checkbox 선택하기 (1) | 2011.11.24 |
jQuery 로 해보는 체크박스(checkbox) 전체선택, 선택해제 예제 (2) | 2011.11.15 |
jQuery로 테이블 tr 동적으로 추가,삭제 하기 v2 (33) | 2011.11.11 |
jQuery로 테이블 tr 동적으로 추가,삭제 하기 (3) | 2011.11.11 |