javascript - 2단계 트리메뉴 마우스오버(mouseover), 온포커스(onfocus) 구현

jQuery를 시작한지 얼마 되지 않아 jQuery함수를 잘 몰라 이래저래 혼용하여 만들어 보았습니다.
근래에 웹 접근성 작업을 하면서 메뉴 스크립트 요청이 잦아서 내친김에 많이 쓰일 수 있을만한 패턴을 올려봅니다.
필요하신 분 퍼다 쓰세요 ㅎㅎ

스크립트명 : GNB, LNB Initialize
HTML구조 : ul – li – ul – li 로 이루어진 2단계 메뉴
이벤트 : mouseover, onfocus

이 스크립트는 언제 쓰죠?
1. 이미지 메뉴가 아닌 올 텍스트 메뉴.
2. GNB는 2뎁스까지 있고, LNB는 1뎁스까지 있는경우. (만약 LNB가 2뎁스까지 있는 경우엔 GNB쪽 펑션과 이벤트리스너를 복사하여 변경하여 사용하세요.)

HTML 구조

<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

스크립트 소스

/*
    함수명 : 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> 

2단계 트리메뉴 마우스오버(mouseover), 온포커스(onfocus) 구현

단축키

HTML 구조

선언할 변수

스크립트 소스

Articles