2011-09-09 34 views
9

Me gustaría hacer que el icono que se puede hacer clic (imagen) muestre el menú desplegable. Solo necesito un menú simple sin submenús y no quiero utilizar bibliotecas como jQuery o MooTools.Menú desplegable de JavaScript simple

¿Alguien me puede ayudar con esto?

+0

Cualquier razón por la que * no * desea utilizar jQuery? Sería mucho más simple. –

+2

¿Por qué no preguntas a Google antes de escribir aquí? – fsonmezay

+2

No quiero usar jQuery porque es casi 100kB y no lo necesito por ningún otro motivo. No me parece muy inteligente incluir una biblioteca de 100 kB solo por el menú. – saric

Respuesta

18

Simplemente cree el menú en HTML simple, pero escóndalo (visualizar: ninguno). Cuando el usuario haga clic en el botón, muévelo (configure "pantalla: bloque"). Lo que tienes que hacer es agregar "onmouseout" al menú para que desaparezca cuando el usuario abandone el menú.

Algo como esto

<img src="icon.gif" onclick='showMenu()' /> 
<ul id="menu" style="display:none" onmouseout="hideMenu()"> 
    <li>Menu1</li> 
    <li>Menu2</li> 
</ul> 

<script type="text/javascript"> 
function showMenu(){ 
    document.getElementById("menu").style.display="block"; 
} 
function hideMenu(){ 
    document.getElementById("menu").style.display="none"; 
} 
</script> 
Cuestiones relacionadas