jQuery를 시작한지 얼마 되지 않아 jQuery함수를 잘 몰라 이래저래 혼용하여 만들어 보았습니다.
근래에 웹 접근성 작업을 하면서 메뉴 스크립트 요청이 잦아서 내친김에 많이 쓰일 수 있을만한 패턴을 올려봅니다.
필요하신 분 퍼다 쓰세요 ㅎㅎ
스크립트명 : GNB, LNB Initialize
HTML구조 : ul – li – ul – li 로 이루어진 2단계 메뉴
이벤트 : mouseover, onfocus
이 스크립트는 언제 쓰죠?
1. 이미지 메뉴가 아닌 올 텍스트 메뉴.
2. GNB는 2뎁스까지 있고, LNB는 1뎁스까지 있는경우. (만약 LNB가 2뎁스까지 있는 경우엔 GNB쪽 펑션과 이벤트리스너를 복사하여 변경하여 사용하세요.)
HTML 구조
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | < ul id = "gnb" > < li >< a href = "#" >GNB A</ a > < ul > < li >< a href = "#" >GNB A-1</ a ></ li > < li >< a href = "#" >GNB A-2</ a ></ li > </ ul > </ li > </ ul > < ul id = "lnb" > < li >< a href = "#" >SNB A</ a > < ul > < li >< a href = "#" >SNB A-1</ a ></ li > < li >< a href = "#" >SNB A-2</ a ></ li > </ ul > </ li > </ ul > |
선언할 변수
헤드에 선언하면 됩니다. GNB, LNB번호를 넣어주어 현재 메뉴 위치를 나타냅니다. 번호는 0번이 아닌 1번부터 시작합니다.
1 2 3 | var gnbDep1 = 1; //GNB depth 1 var gnbDep2 = 2; //GNB depth 2 var lnbDep1 = 1; //LNB depth 1 |
스크립트 소스
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 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 | /* 함수명 : GNB, LNB Initialize 작성자 : 장호연(http://eventjang.com) 코멘트 - UL - LI 구조의 트리구조 메뉴 스크립트. - <img>의 src 변경없이 <li>의 클래스 변경만을 필요로 하는 유형에 사용함. - mouseover 와 onfocus 이벤트를 처리. - 활성화시 클래스는 'active' */ jQuery(document).ready( function (){ //초기화 실행 gnbInit(gnbDep1, gnbDep2); lnbInit(lnbDep1); //마우스커서와 포커스가 메뉴 영역을 벗어났을때 GNB 초기화 $( "#sub, #container, #footer" ).mouseover( function (){ gnbInit(gnbDep1, gnbDep2); }).focusin( function (){ $( this ).mouseover(); }); //마우스커서와 포커스가 메뉴 영역을 벗어났을때 LNB 초기화 $( "#header, #contents, #footer" ).mouseover( function (){ lnbInit(lnbDep1); }).focusin( function (){ $( this ).mouseover(); }); //GNB mouseover, onfocus 이벤트 처리 $( "#gnb > li > a" ).mouseover( function (){ var cnt = gnbDep1; for ( var i=0; i<$( "#gnb > li" ).size(); i++){ if ($( "#gnb > li:eq(" + i + ")" )[0] == $( this ).parent()[0]){ cnt = i+1; } } if (cnt == gnbDep1){ gnbInit(cnt, gnbDep2); } else { gnbInit(cnt, "" ); } }).focusin( function (){ $( this ).mouseover(); }); //SNB mouseover, onfocus 이벤트 처리 $( "#lnb > li > a" ).mouseover( function (){ var cnt = lnbDep1; for ( var i=0; i<$( "#lnb > li" ).size(); i++){ if ($( "#snb > li:eq(" + i + ")" )[0] == $( this ).parent()[0]){ cnt = i+1; } } lnbInit(cnt); }).focusin( function (){ jQuery( this ).mouseover(); }); //선택한 SNB를 active(활성화) 시킨다. function gnbInit(dep1, dep2){ $( "#gnb > li > ul" ).hide(); $( "#gnb > li:eq(" +(dep1-1)+ ") > ul" ).show(); $( "#gnb > li" ).removeClass( "active" ); $( "#gnb > li:eq(" +(dep1-1)+ ")" ).addClass( "active" ); $( "#gnb > li > ul > li" ).removeClass( "active" ); if (dep2 != "" ){ $( "#gnb > li:eq(" +(dep1-1)+ ") > ul > li:eq(" +(dep2-1)+ ")" ).addClass( "active" ); } } //선택한 LNB를 active(활성화) 시킨다. function lnbInit(dep1){ $( "#snb > li" ).removeClass( "active" ); $( "#snb > li:eq(" +(dep1-1)+ ")" ).addClass( "active" ); } }); </li> |