menú de jquery que se cierne

Question

tengo un menú que cuando muevo el ratón sobre un div se mostrará y en el mouse se desvanecerá. el problema es que si vuelcas cualquiera de los menús del menú, el menú desaparecerá (porque técnicamente si eres más de uno de los niños, entonces no estás por encima del padre) ¿hay alguna manera para que rodar sobre los niños no lo haga? contar como un mouseout? aquí está mi código: http://jsfiddle.net/32bLg/

Answer 1

Este es un problema muy simple que la mayoría de las personas tiende a complicar masivamente con temporizadores y verificaciones de casos especiales. La solución fácil es a través de marcado. Coloque el objetivo del control deslizante y el menú debajo del mismo elemento primario, y rastree el elemento emergente en el elemento primario. Like this. Es posible que también desee utilizar el complemento jQuery hoverIntent para evitar falsos eventos de desplazamiento.

Nota de UX: las animaciones de desvanecimiento que duran más de 500 ms son groseras. Por favor no hagas eso.

Answer 2

Aquí es una solución simple: http://jsfiddle.net/32bLg/16/

Answer 3

Salida estas agradables ejemplos:

Nice JQuery menus

Un específica multinivel uno:

Multilevel JQuery menu

HTML de enlace 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

Usted necesita contener el div menú dentro de la div vuelo estacionario. Ver http://jsfiddle.net/T72jm/2/.

Notarás (al menos en Chrome) que si pasas el cursor por encima de tu div y no haces nada, el menú div se desvanecerá.

Answer 5

este es mi dosis

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