jquery menu lơ lửng

Question

tôi có một menu khi tôi di chuột qua một div nó sẽ hiển thị và trên chuột ra nó sẽ mờ dần. vấn đề là nếu bạn cuộn qua bất kỳ con của trình đơn, menu sẽ biến mất (bởi vì về mặt kỹ thuật nếu bạn ở trên một trong những đứa trẻ thì bạn không ở bên cha mẹ) là có cách để lăn qua các trẻ sẽ không được tính là một lần thoát? đây là mã của tôi: http://jsfiddle.net/32bLg/

Answer 1

Đây là một vấn đề rất đơn giản, hầu hết mọi người có xu hướng ồ ạt quá mức với bộ hẹn giờ và kiểm tra trường hợp đặc biệt. Giải pháp dễ dàng là thông qua đánh dấu. Đặt cả hai mục tiêu di chuột và menu dưới cùng một phụ huynh và theo dõi di chuột lên cấp độ gốc. Like this. Bạn cũng có thể muốn sử dụng plugin hoverIntent jQuery để tránh các sự kiện di chuột giả.

Ghi chú UX: hoạt ảnh mờ dần kéo dài trên 500 mili giây thật thô lỗ. Làm ơn đừng làm thế.

Answer 2

Dưới đây là một giải pháp đơn giản: http://jsfiddle.net/32bLg/16/

Answer 3

Kiểm tra những ví dụ đẹp:

Nice JQuery menus

Một cụ đa cấp một:

Multilevel JQuery menu

HTML từ liên kết 2:

<ul id="nav"> 
    <li><a href="#">1 HTML</a></li> 
    <li><a href="#">2 CSS</a></li> 
    <li><a href="#">3 Javascript</a> 
     <ul> 
      <li><a href="#">3.1 jQuery</a> 
       <ul> 
        <li><a href="#">3.1.1 Download</a></li> 
        <li><a href="#">3.1.2 Tutorial</a></li> 
       </ul> 
      </li> 
      <li><a href="#">3.2 Mootools</a></li> 
      <li><a href="#">3.3 Prototype</a></li> 
     </ul> 
    </li> 
</ul> 

CSS:

#nav, #nav ul{ 
     margin:0; 
     padding:0; 
     list-style-type:none; 
     list-style-position:outside; 
     position:relative; 
     line-height:1.5em; 
    } 

    #nav ul ul{ 
    top:auto; 
    } 

#nav li ul ul { 
    left:12em; 
    margin:0px 0 0 10px; 
    } 

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{ 
    display:none; 
    } 
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{ 
    display:block; 
    } 

JS:

function mainmenu(){ 
$(" #nav ul ").css({display: "none"}); // Opera Fix 
$(" #nav li").hover(function(){ 
     $(this).find('ul:first').css({visibility: "visible",display: "none"}).show(400); 
     },function(){ 
     $(this).find('ul:first').css({visibility: "hidden"}); 
     }); 
} 

$(document).ready(function(){ 
    mainmenu(); 
}); 

Answer 4

Bạn cần phải chứa div trình đơn bên trong div di chuột. Xem http://jsfiddle.net/T72jm/2/.

Bạn sẽ nhận thấy (ít nhất là trong Chrome) rằng nếu bạn di chuột qua div di chuột của bạn và không làm bất cứ điều gì, div menu sẽ mờ dần.

Answer 5

đây là sửa chữa của tôi

window.menushowing = false; 

$('#menu').hover(

function() { 
    window.menushowing = true; 
}, function() { 
    window.menushowing = false; 
    hideMenu(); 
}); 

function hideMenu() { 
    if (window.menushowing) return; 
    $('#menu').animate({ 
     opacity: 0 
    }, 1500, function() { 
     $('#menu').hide(); 
    }); 
} 

$('#examplePic').hover(

function() { 
    window.menushowing = true; 
    $('#menu').css('display', 'block'); 
    $('#menu').animate({ 
     opacity: 1 
    }, 1500); 

}, function() { 
    hideMenu(); 
});