Por favor ayuda con comportamiento de menú desplegable

[rProgged]

Holas,

Espero que estén todos muy bien, entiendo que este tema está ya bastante conversado y que incluso existen generadores de menús muy simples y serviciales. El punto es que me picó el bichito por hacer mi propio menú, de manera de aprender cómo es el tema "tras bambalinas"

Hasta aquí todo bien, logré hacer el menú, se despliega y todo OK, sin embargo quisiera mejorar su comportamiento y es aquí donde solicito vuestra invaluable ayuda ya que sencillamente no se me ocurre cómo hacerlo...

1.- Mi menú aparece y desaparece al hacer clic sobre el botón que lo despliega, yo quisiera que también desaparezca cuando hagas clic en cualquier otro lugar de la página que no sea sobre el área del menú.

2.- Como 2ª etapa quisiera darle efectos para que aparezca y desaparezca, si tienen algún recurso para aprender a hacer eso seré muy feliz

Les cuento que el menú está hecho en un div, y que creo las opciones agregando dentro del div una tabla dinámica con Javascript.

Eso es, desde ya muchas gracias por su ayuda y por leer el post.

Salu2,

Rodrigo

[rProgged]

SOLUCIONADO:

El cuento es que una vez que despliegas el menú (que es un div) debes darle un atributo onClick al cuerpo de la página, de forma tal que cuando se haga clic en cualquier lugar fuera del menú se oculte el layer. Concretamente quedaria así:

creaste el layer y todo eso...

...
objMenu.style["visibility"] = "visible"; //muestro el layer
objMenu.onmouseover = function(){menuDesp = true;} //defino una variable que me indica que el mouse está sobre el menu (para que no se cierre si hago clic)
objMenu.onmouseout = function(){menuDesp = null;} //defino una variable que me indica que el mouse está fuera del menú
document.body.onclick = function(){ocultarMenu()}; //defino el evento onClick para el cuerpo, para que cierre el menu


y la función para cerrar seria algo así:

function ocultarMenu()
{
if ( menuDesp==null )
{
objMenu = document.getElementById("topMenu");
objMenu.innerHTML = ""; //limpio el layer (borra el menu)
objMenu.onmouseout = ""; //limpio los eventos definidos para que se comporte como si nunca hubiera existido el menú una vez cerrado
objMenu.onmouseover = "";
document.body.onClick = "";
}
}

y eso seria todo. Espero les sirva

Chaus y bendiciones,

Rodrigo