Menu Desplegable jQuery (I)

Escrito por
WillxD
el 29 de May del 2009 en
JavaScript
AudioJungle - Encuentra archivos de musica, loops, efectos de sonido desde $1

menu-desplegable-jquery-i
jQuery es una grandiosa librería JavaScript con la cual podemos hacer infinidad de cosas.

Veamos como hacer un Menú desplegable con jQuery en tan solo 5 líneas de código:

Primero debemos tener un fichero HTML con la siguiente estructura:

<div id="menu1">
	<h1>Articulos</h1>
	<ul>
		<li><a href="#">Noticias</a></li>
		<li><a href="#">Tecnologia</a></li>
		<li><a href="#">Wordpress</a></li>
	</ul>
	<h1>Recursos</h1>
	<ul>
		<li><a href="#">Brushes</a></li>
		<li><a href="#">Pattern</a></li>
		<li><a href="#">Texturas</a></li>
		<li><a href="#">Vectores</a></li>
	</ul>
	<h1>Tutoriales</h1>
	<ul>
		<li><a href="#">CSS</a>
		<li><a href="#">Java</a></li>
		<li><a href="#">Javascript</a></li>
	</ul>
</div><!-- end menu1 -->

En el CSS:

#menu1{
	width:200px;
	margin:auto;
	margin-top:100px;
}
 
#menu1 h1{
	color:#b66737;
}
 
#menu1 ul{
	display:none; /* Importante! esto hace que las listas esten ocultas */
}
 
#menu1 a{
	color:#b66737;
	font-size:12px;
}

Y ahora las 5 líneas de código que harán un sencillo pero grandioso menú desplegable:

  $(document).ready(function(){
		$("#menu1 h1").mouseover(function(){
			$(this).next("#menu1 ul").slideDown(500).siblings("#menu1 ul").slideUp("slow");
		});
	});

Demo:Menu Desplegable jQuery (I)
Enlace:Descargar Menu Desplegable jQuery (I)

CodeCanyon - Las mejores aplicaciones PHP, JS, Java y .NET desde $5
Anunciate aqui

Una respuesta en “Menu Desplegable jQuery (I)”

  1. Kazbam says:
    19 November 2009 at 16:00

    Yeah! Está re chulo! Gracias.

    Reply

Deja tu Comentario