GNB메뉴 Mouse On일때 스치기만해도 서브메뉴가 나올 시 해결방법

퍼블리싱을 하다보면 GNB의 1Depth 메뉴에 마우스를 올렸을경우 2Depth메뉴가 아래로 내려오는 UI를 구현하는경우가 많습니다.

퍼블리싱을 하다보면 GNB의 1Depth 메뉴에 마우스를 올렸을경우 2Depth메뉴가 아래로 내려오는 UI를 구현하는경우가 많습니다.
이때 의도치 않게 마우스가 브라우저 상단에서 컨테츠쪽으로 이동하려고 할때 GNB영역을 거치게 되는데, 바로 2Depth메뉴가 나타나는 경우가 생깁니다. 말하자면 의도치 않게 2Depth메뉴를 보게 되는 것입니다.

그럴경우 Mouse On의 감도를 조절하여 그냥 스쳐지나가는 것은 반응이 일어나지 않고 의도를 가지고 어느정도 버튼에 머물 경우 2Depth메뉴가 나오게 하는 javascript코드입니다.

JAVASCRIPT

var delay = 150, setTimeoutConst;  // delay의 값으로 감도를 조절합니다.
jQuery('.gnb .depth1').hover(function() {  // .gnb의 .depth1 class에 Mouse On 이벤트를 겁니다.
    setTimeoutConst = setTimeout(function() {
        jQuery('.gnb .depth1 ul').slideDown('slow').css('display', 'block');
    }, delay);
}, function() {
    clearTimeout(setTimeoutConst);
    if (jQuery('.gnb .depth1 ul').is(':hidden')) {} else {
        jQuery('.gnb .depth1 ul').css('display', 'block').slideUp('slow');
    }
});

var delay = 150, setTimeoutConst;  // delay의 값으로 감도를 조절합니다.
jQuery('.gnb .depth1').hover(function() {  // .gnb의 .depth1 class에 Mouse On 이벤트를 겁니다.
var objThis = jQuery(this);
    setTimeoutConst = setTimeout(function() {
   jQuery(objThis).find('ul').slideDown('slow').css('display', 'block');

    }, delay);
}, function() {
    var objThis = jQuery(this);
    clearTimeout(setTimeoutConst);
    if ( jQuery(objThis).find('ul').is(':hidden')) {} else {
        jQuery(objThis).find('ul').css('display', 'block').slideUp('slow');
    }
});

HTML

<div class="gnb">
    <ul class="depth1">
        <li>메뉴1</li>
        <li>메뉴2
            <ul class="depth2">
                <li>메뉴2-1</li>
                <li>메뉴2-2</li>
                <li>메뉴2-3</li>
            </ul>
        </li>
        <li>메뉴3
            <ul class="depth2">
                <li>메뉴3-1</li>
                <li>메뉴3-2</li>
                <li>메뉴3-3</li>
            </ul>
        </li>
        <li>메뉴4
            <ul class="depth2">
                <li>메뉴4-1</li>
                <li>메뉴4-2</li>
                <li>메뉴4-3</li>
            </ul>
        </li>
    </ul>
</div>

​