menu jquery in bilico

Question

Ho un menu che quando passo con il mouse su un div lo mostrerà e al passaggio del mouse si spegnerà. il problema è che se passi su uno dei bambini del menu il menu sparirà (perché tecnicamente se sei sopra uno dei bambini allora non sei sopra il genitore) c'è un modo per far rotolare i bambini conta come un mouse fuori? ecco il mio codice: http://jsfiddle.net/32bLg/

Answer 1

Questo è un problema molto semplice la maggior parte delle persone tende a complicarsi in modo massivo con timer e controlli caso speciali. La soluzione facile è tramite markup. Colloca il target di passaggio del mouse e il menu sotto lo stesso padre e traccia il passaggio del mouse sul genitore. Like this. Si consiglia inoltre di utilizzare il plug-in jQuery hoverIntent per evitare falsi eventi di hover.

Una nota UX: le animazioni di dissolvenza che superano i 500 ms sono semplicemente maleducate. Per favore, non farlo.

Answer 2

Ecco una soluzione semplice: http://jsfiddle.net/32bLg/16/

Answer 3

Guarda anche questi bei esempi:

Nice JQuery menus

Una specifica multilivello uno:

Multilevel JQuery menu

HTML dal link 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

È necessario contenere il div menù all'interno del div hover. Vedi http://jsfiddle.net/T72jm/2/.

Noterai (almeno in Chrome) che se passi il mouse sopra il tuo passaggio al passaggio del mouse e non fai nulla, il div del menu si dissolverà.

Answer 5

questa è la mia correzione

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(); 
});