Menú desplegable

yonolose · #1 (**permalink**) 07/08/2009, 08:32

Hola!

Quisiera realizar un menú desplegable, y antes estoy haciendo unas pruebas... pero me paro en una cosa:

Cuando se pasa el mosue al div "menuoculto", este desaparece.

Lo que intento hacer es que este no desaparezca, hasta que el ratón no esté fuera del todo, es decir, ni en el div de los Menús principales, ni en el de menuoculto.

Espero haberme explicado, les dejo el código.

Código javascript:

Ver original<head>
<script language="javascript">
 
//variables de InnerHtml
 
var menua='<a herf="#">Men&uacute; oculto A</a>';
 
var menub='<a herf="#">Men&uacute; oculto B</a>';
 
 
function ocultar(){
 
 document.getElementById('menuoculto').style.visibility = "hidden";
 
}
 
 
function mostrar(what){
 
switch(what){
 
case "menua":
 
var MENUHTML=menua;
 
break;
 
case "menub":
 
var MENUHTML=menub;
 
break;
 
}
 
 document.getElementById('menuoculto').innerHTML = MENUHTML;
  
 document.getElementById('menuoculto').style.visibility = "visible";
 
}
</script>
 
 
</head>
 
<body>
 
<div style="overflow:auto;">
 
<div style="width:150px;float:left;" onMouseOver="mostrar('menua')" onMouseOut="ocultar()">Men&uacute; A</div>
 
<div style="width:150px;float:left;" onMouseOver="mostrar('menub')" onMouseOut="ocultar()">Men&uacute; B</div>
 
</div> 
 
<div id="menuoculto" style="border-top:1px solid #666666;padding:6px;visibility:hidden;"></div>

Saludos y espero que puedan ayudarme

David · #2 (**permalink**) 07/08/2009, 09:15

En lugar de usar el evento onmouseout de cada div del menú, coloca el div menuoculto dentro del mismo contenedor que los elementos del menú y usa el evento onmouseout del contenedor.

yonolose · #3 (**permalink**) 07/08/2009, 12:43

Gracias por tu respuesta... Ahora tengo esto en el body (el javascript es el mismo)... pero siga haciendo igual, cuando sitúo el cursor sobre el "menuoculto", se cierra

Código HTML:

 <div style="overflow:auto;border:1px solid blue;" onMouseOut="ocultar()">


<div style="overflow:auto;">

<div style="width:150px;float:left;" onMouseOver="mostrar('menua')">Men&uacute; A</div>

<div style="width:150px;float:left;" onMouseOver="mostrar('menub')">Men&uacute; B</div>

</div>

<div id="menuoculto" style="border-top:1px solid #666666;padding:6px;visibility:hidden;"></div>

  </div>

Saludos y espero que puedan seguir ayudando

David · #4 (**permalink**) 07/08/2009, 21:08

Ya veo.

Creo que será mejor en este caso anidar los menús de acuerdo al elemento que lo activa (y, mejor aún, hacerlo más semántico usando una lista desordenada en lugar de divs).

yonolose · #5 (**permalink**) 08/08/2009, 07:37

Gracias por tu respuesta de nuevo, pero no entiendo a qué te refieres con anidar...