2009-06-08 5 views
2

다음 코드는 메뉴 항목 위에 마우스를 올리면 하위 메뉴를 표시합니다. 하위 메뉴 항목을 빠르게 선택하지 않으면 타이머를 사용하기 때문에 하위 메뉴 항목이 사라집니다. 내가 오히려 다른 메뉴 항목을 가리 키거나 다른 기본 메뉴 항목을 클릭하기 전까지는 메뉴 옵션을 highlite로 설정하고 다른 기본 메뉴 항목을 클릭 할 때까지 하위 메뉴 항목을 유지해야합니다.jQuery 호버 메뉴

$ (document) .ready (function() { Nifty 메뉴에 ","작은 상부 투명 투명한 ") 프티 ("#의 outcontent ","중간 바닥 ");

function hideSubMenu() { 
    $("#sub-menu-content").fadeOut('slow'); 
    hideSubMenu.timeout = 0; 
} 

$('#menu a').hover(function() { //start function when any link is clicked 
    if (hideSubMenu.timeout) clearTimeout(hideSubMenu.timeout); 
    hideSubMenu.timeout = 0; 
    $("#sub-menu-content").hide(); 

    var html = '<ul>' + $(this).next('ul.sub-menu').html() + '</ul>&nbsp;'; 
    $("#sub-menu-content").html(html); //show the html inside .content div 
    $("#sub-menu-content").fadeIn('fast'); //animation 
},function(){ 
    hideSubMenu.timeout = setTimeout(hideSubMenu, 800); 
}); //close click(

$('#sub-menu-content').hover(function() { 
    if (hideSubMenu.timeout) clearTimeout(hideSubMenu.timeout); 
    hideSubMenu.timeout = 0; 
},function(){ 
    hideSubMenu.timeout = setTimeout(hideSubMenu, 800); 
}); //close click(
}); //close $(

조치로 보려면 :

http://cruisecontrolledmarketing.com/test/welcome/login 사용자 : 부재 암호 : 재방매

고마워요!

답변

7

무언가를 해킹하는 것이 아니라 hoverIntent plugin을 확인하는 것은 어떻습니까?

+0

나는 그것을 검사 할 것이다. 나는 전에 그것을 본 적이 없다. –

+0

나는 그것을 추천한다. 우리는 현장에서 항상 생산에 사용합니다. 구성하기 쉽고 필요로하는 것을 정확히 수행해야합니다. – ajm

+0

나는 그것을 작동 시키려고 노력하고있다. 그냥 hover 이벤트를 대체 할까? hoverIntent (config, function()) { 또한 jquery.event.hover-1.0을 찾았습니다. 예를 들어, $ ('# menu a')를 사용하면 hover (function() { $ js - hoverIntent보다 "좋음"이라고 가정합니다. 모두 체크하고 있습니다. –

0

나는 상상할 수있는 모든 종류의 효과로 메뉴, 팝업, 마우스 오버, 가치 등 모든 종류의 개념을 거의 포함하고있는 놀라운 페이지를 발견했습니다. 나는 그 중 일부를 확장하고 더 나은 메뉴를 만드는 것이 대단히 유용하다는 것을 알았습니다.

45 beautiful jQuery Menu plugins and tutorials