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 1var gnbDep2 = 2; //GNB depth 2var 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> |
드롭다운 메뉴를 만들어보자! -1탄