네비게이터 메뉴 선택시 삼각형 표시 추가하기, hover 이벤트로 간결하게 구현하기

지난번에 수평 내비게이터를 구현하면서 Mouseenter와 Mouseleave이벤트를 사용했다.

이 둘은 하위요소에 마우스를 올리거나 치워도 발생하는 특성이 있기 때문이었다.

 

그러나, hover를 사용하면, 이 두 이벤트에 대한 처리를 동시에 할 수 있다는 사실을 깨달았으며

불필요하게 div#wrapper 같은 랩핑 요소를 추가할 필요가 없다는 것을 알았다.

 

또한, 마우스 오버시에 하위 메뉴가 slideDown( )되는 것뿐만 아니라, 삼각형 표시를 추가하여 시각적으로

자신이 어떤 상위메뉴에 포커스 하였는지 쉽게 알아볼 수 있게 설계했다.

 

그러나 ::before, ::after 같은 가상 요소는 제이쿼리에서 메서드로 동작을 제어하기 힘들다.

그래서 생각한 것이 특정클래스를 가진 요소에만 이 가상 요소를 적용하도록 한 후에

addClass( ), removeClass( ), toggleClass( )등으로 그 특정 클래스를 추가, 제거하도록 하면 된다.

 

아래의 코드는 .selected 클래스를 가진. main-menu에만 ::before요소에 css를 적용하는 방법이다.

.main-menu.selected::before{
    position: absolute;
    border-top: 15px solid transparent;
    border-left: 15px solid transparent;
    border-right:15px solid transparent;
    border-bottom:15px solid rgb(47, 128, 255);
    content: " ";
    left: 50%;
    top: 100%;
    transform: translate(-50%,-100%);
}

 

아래의 소스코드는 JavaScript + JQuery 소스코드이다.

$(document).ready(function(){
    $("ul[id^='sub']").slideUp(0,"linear");
    $("ul[id^='sub']").css("visibility","visible");
    $("#main-nav > li").hover(
        function(){
            if(!$(this).children("ul").is(":animated")){
                $(this).children(".main-menu").addClass("selected");
                $(this).children("ul").slideDown(200,"swing");
            }
        },
        function(){
            $(this).children(".main-menu").removeClass("selected");
            $(this).children("ul").slideUp(200,"swing");
        }
    );
    $(".sub-menu").hover(
        function(){
            $(this).css("background-color","rgb(52,102,187)");
        },function(){
            $(this).css("background-color","rgb(47,128,255)");
        }
    );
});

이전에 구현했던 동작 소스코드와는 다르게 hover 이벤트를 사용했으며

내부에 쓰인 if문은 중복실행을 방지하기 위해 사용되었다.

 

 

원래는 toggleClass( ) 메서드를 사용하려 했으나 다음과 같은 문제가 발생했다.

 

1 - "학과 소개" 상위메뉴에 마우스 커서를 올리면 "학과소개" 메뉴에 selected클래스가 toggle(add)이 실행된다.

 

2 - "학과 소개"에서 "교육과정" 상위 메뉴로 마우스 커서를 올리면 "학과 소개"의 selected 클래스는 toggle(remove)되고 "교육과정"의 selected 클래스는 toggle(add)된다.

 

3 - "학과소개"의 하위 메뉴가 완전히 slideUp( )되기 전에 다시 "학과소개"상위 메뉴로 커서를 이동하면 조건문에 의해 아직 애니메이션이 끝나지 않았으므로 조건문이하의 내용은 실행되지 않는다. 즉 selected클래스는 없다.

 

4 - 다시 "교육과정"의 상위메뉴로 마우스 커서를 올리면 "학과 소개"에서 mouseleave 된 것으로 간주하고 toggle(add)의 기능을 실행한다. 그렇게 되면 selected클래스가 추가되고 "학과 소개"메뉴에는 마우스 커서가 없는데도 불구하고 삼각형 표시가 남아있게 된다.

 

이러한 문제를 해결하려면 중복을 방지하는 방식을 if문에서 중복을 판단하는 것이 아니라 그냥 마우스를 벗어나면 애니메이션을 stop( ) 하도록 하고 그 이후에 slideUp( ), slideDown( )을 하면 해결될 것이다.

 

아래는 toggleClass( )를 활용한 hover이벤트 등록 방식이다.

$("#main-nav > li").hover(
    function(){
        $(this).children(".main-menu").toggleClass("selected");
        $(this).children("ul").stop().slideDown(200,"swing");
    },
    function(){
        $(this).children(".main-menu").toggleClass("selected");
        $(this).children("ul").stop().slideUp(200,"swing");
    }
);