Menú animado desplegable con CSS y jquery

menu_desplegableTras el inesperado éxito de mi artículo Menú animado con CSS y jquery, me he decidido a escribir un nuevo tutorial sobre creación de menús: cómo hacer un menú horizontal animado desplegable con CSS y jquery. Cada elemento del menú horizontal contendrá un submenú vertical que se desplegará con una animación. A su vez, al pasar el ratón sobre cada entrada del submenú éste cambiará de color de forma gradual. El resultado lo puedes ver aquí: Ver demo

Imágenes

La única imagen que vamos a utilizar es este gradiente para el fondo de los submenús, que además del efecto relieve que proporciona, nos ayudará a realizar las transiciones del hover.

fondo_menu

HTML

El html empleado es una simple lista con otra lista anidada para cada submenú:

<ul id="nav">
	<li><a href="#">Menu 1</a>
		<ul class="submenu">
			<li><a href="#">Submenu 1</a></li>
			<li><a href="#">Submenu 2</a></li>
			<li><a href="#">Submenu 3</a></li>
		</ul>
	</li>
	<li><a href="#">Menu 2</a>
		<ul class="submenu">
			<li><a href="#">Submenu 1</a></li>
			<li><a href="#">Submenu 2</a></li>
			<li><a href="#">Submenu 3</a></li>
		</ul>
	</li>
	<li><a href="#">Menu 3</a>
		<ul class="submenu">
			<li><a href="#">Submenu 1</a></li>
			<li><a href="#">Submenu 2</a></li>
			<li><a href="#">Submenu 3</a></li>
		</ul>
	</li>
	<li><a href="#">Menu 4</a>
		<ul class="submenu">
			<li><a href="#">Submenu 1</a></li>
			<li><a href="#">Submenu 2</a></li>
			<li><a href="#">Submenu 3</a></li>
		</ul>
	</li>
</ul>

Añadiendo el CSS

La mayor parte del css son para mejorar el aspecto visual del menú. Funcionalmente, podemos destacar varias cosas. Los elementos de la lista principal (#nav) se encuentran flotados a la izquierda, para formar el menú horizontal, y tienen position: relative para que sirva de referencia a cada submenú. A la lista del submenú le asignamos position: absolute, para que cuando se despliegue esté situada bajo su menú correspondiente. Este submenú lo ocultamos por defecto con display: none para después mostrarlo con javascript cuando pasemos el ratón por encima de su menú padre. A cada enlace del elemento del submenú añadiremos la imagen del gradiente como background.

a{
display: block;
text-decoration: none;
color: #004a80;
padding: 5px;
}
 
ul{
width: 500px;
height: 28px;
}
 
ul,li{
list-style: none;
margin:0;
padding:0;
}
 
#nav{
font-family: 'Century Gothic', sans-serif;
}
 
#nav li{
float:left;
position: relative;
width: 125px;
font-size: 14px;
font-variant: small-caps;
border-top:1px solid #004a80;
border-bottom:1px solid #004A80;
}
 
.submenu{
display: none;
position: absolute;
left: -1px;
border:none;
height: auto;
background: none;
}
 
#nav .submenu li{
float: none;
position: static;
margin: 0;
font-size: 11px;
font-variant: normal;
border: 1px solid #004a80;
border-top: none;
width: 124px;
}
 
#nav .submenu li a{
color: #FFFFFF;
background: #004a80 url('fondo_menu_vertical.png') repeat-x 0 0;
width: 114px;
height: 16px;
}

Javascript y jQuery

Ahora añadiremos la funcionalidad del menú. Para ello necesitaremos primero incluir la librería jQuery, que podemos hacerlo cargándola directamente desde el repositorio de Google:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript" charset="utf-8"></script>

También necesitaremos añadir el plugin backgroundPosition para jQuery, ya que éste no soporta de serie la animación de la propiedad background-position. Lo descargaremos y añadiremos así:

<script type="text/javascript" src="jquery.backgroundPosition.js"></script>

Finalmente, con unas pocas líneas de código, usando la función slideDown/slideUp y el evento hover mostraremos el submenú correspondiente cuando pasemos el ratón por uno de los elementos del menú principal. Usando la función animate, al pasar el ratón por encima de cada entrada del submenú se cambiará la propiedad background-position, deslizando la imagen del gradiente y creando un efecto de fundido rápido, para que la transición sea más suave que si utilizáramos simplemente a:hover para cambiar el color de fondo del enlace activo.

<script type="text/javascript">
$(function(){
	$('#nav>li').hover(
		function(){
		$('.submenu',this).stop(true,true).slideDown('fast');
		},
		function(){
		$('.submenu',this).slideUp('fast');
		}
	);
 
	$('.submenu li a').css( {backgroundPosition: "0px 0px"} ).hover(
		function(){
		$(this).stop().animate({backgroundPosition: "(0px -99px)"}, 250);
		},
		function(){
		$(this).stop().animate({backgroundPosition: "(0px 0px)"}, 250);
		}
	);			
});
</script>
Compartir:

90 comentarios para “Menú animado desplegable con CSS y jquery”

  1. hola David, cordial saludo, mira tengo un problema con el menu, cuando pasa el mouse, no cambia la imagen, pudes verlo funcionar en: http://danielantioquia.info/menej.php
    este es el codigo:

    $(function(){
    $(‘#nav>li’).hover(
    function(){
    $(‘.submenu’,this).stop(true,true).slideDown(‘fast’);
    },
    function(){
    $(‘.submenu’,this).slideUp(‘fast’);
    }
    );

    $(‘.submenu li a’).css( {backgroundPosition: “0px 0px”} ).hover(
    function(){
    $(this).stop().animate({backgroundPosition: “(0px -99px)”}, 250);
    },
    function(){
    $(this).stop().animate({backgroundPosition: “(0px 0px)”}, 250);
    }
    );
    });

    Menu 1

    Submenu 1
    Submenu 2
    Submenu 3

    Menu 2

    Submenu 1
    Submenu 2
    Submenu 3

    Menu 3

    Submenu 1
    Submenu 2
    Submenu 3

    Menu 4

    Submenu 1
    Submenu 2
    Submenu 3

     

  2. David Rojas dice:

    @daniel Te falta el plugin background position de jquery para hacer deslizar el background de la imagen, en tu página has puesto el link del script en la cabecera pero el fichero jquery.backgroundPosition.js no está en tu servidor (o bien lo has puesto en otra carpeta y la ruta no está correcta). Si utilizas Firebug, en la pestaña de red verás que te aparece el error de que no ha podido descargar ese fichero.

  3. Hola David, gracias por tu interés en mis inquietudes. siguiendo el link sobre plugin backgroundPosition, me lleva a la pagina http://plugins.jquery.com/project/backgroundPosition-Effect, pero esta no me brinda la posibilidad de descarga. te agradecería profundamente que pudieras guiarme con respecto a esto. Saludos

  4. David Rojas dice:

    @daniel Aquí puedes descargarlo, guardalo y cambia la extensión a .js

  5. hola David, te cuento que sigo teniendo problemas con el menu. ya segui todas tus instrucciones. puedes darle un vistazo en http://danielantioquia.info/sitios/easycode-vet/menej.php.

    De antemano agradezco tu interés en mis inquietudes

  6. David Rojas dice:

    @daniel La ruta a la imagen fondo_menu_desplegable.png es incorrecta o no has subido el archivo. De nuevo recomiendo usar Firebug, cargando la página y mirando en la pestaña “Red” del Firebug se ve rápidamente en rojo el error not found del archivo.

  7. Jorge Arzuaga dice:

    Hola david, pregunto, éste menú funciona a n niveles ó solo a 2.. Gracias por el aporte

  8. David Rojas dice:

    @Jorge Sólo a 2. Existen plugins de jQuery, como el ‘superfish’, que permiten más niveles si no recuerdo mal.

  9. educhip dice:

    Muchas gracias David !! Me ha venido genial el código.

    Saludos.

  10. Nana dice:

    Hola David, excelente trabajo en serio, me ayudo a resolver un problemita, muchas gracias 🙂

  11. Duilio Restuccia dice:

    Gracias David…
    Me he animado a investigar sobre JQuery.
    Pero hasta el momento no encuentro material serio en castellano.

    Podrías rcomendarme algunos sitios de donde estudiar.

    Mil gracias por todo!

  12. Evert dice:

    Hola David, exelente tutorial y muy bueno el menu.
    hice algunos cambios para adaptarlo a una web como ponerle un color de fondo al menu

    #nav li a:hover{
    background-color:#fbbc1c;
    }

    hasta ahi todo bien… pero mi duda es como puedo mantener ese color en el boton del nemu mientras el cursor esta en su respectivo submenu?

    Gracias por compartir tu trabajo… eres un genio

  13. Dumst dice:

    Hola David,
    tendras algo parecido pero con menu vertical y 2do nivel tambien vertical. Estoy trabajando algo asi pero al pasar el mouse al 2do nivel se regresa, es decir.

  14. JAVIER dice:

    Gracias por este menú deplegable
    Muy Bueno

  15. Nataly dice:

    Que tal, gracias por el codigo. Tengo un problema, no me funciona en chrome. Tengo que agregar algo??

  16. David Rojas dice:

    @Nataly siempre trabajo con chrome, funciona perfectamente, ¿qué problema te da?

  17. Sergio dice:

    Está increíble el menú, muchas gracias. Pero, ¿cómo le puedo hacer para que permanezca seleccionado el menú al mover el mouse al submenú? (Es básicamente lo mismo que preguntó Evert).

  18. Sergio dice:

    Ya resolví mi problema. Navegando en internet me encontré con este código:

    #nav li:hover a, #nav li.sfhover { /*THIS CONTROLS THE HOVER COLOR FOR THE MAIN LEVEL NAV BUTTONS */
    color:#30c6ff;
    }

    #nav li li:hover a, #nav li li.sfhover { /*THIS CONTROLS THE HOVER COLOUR FOR SECOND AND THIRD LEVEL NAV BUTTONS*/
    color:#30c6ff;}

    #nav li:hover li a, #nav li.sfhover li a {
    color:#666666;
    }
    #nav li:hover a, #nav li.sfhover a {
    color:#30c6ff;
    }

    Y arregló todo.

  19. nicolas dice:

    Muy bueno el menu. Lo probe en paginas jsp y anda perfecto. Ahora como hago para que el menu se muestre por encima de un frame??.

  20. omar dice:

    oye, buenisimo truco

    gracias!

    un problemilla;
    una ves desplegado el menu, si te vas a uno de los submenos y avansas el mouse asia la derecha, el menu no se esconde!

    solucion que encontre (alomejor existen mejores):
    – modificar el css en la parte que dise “ul” cambiarlo por “#nav ul” y ademas de esto poner el “width” a 100%

    #nav ul{
    width: 100%;
    height: 28px;
    }

    NOTA: si ponen el width a 20px y su menu es de como 100px, se abrira como 20 pero luego se expandera, este es un efecto muy bueno que encontre mientras jugaba con el script…porque la transiscion se ve aun mejor, se despliega asia abajo, y luego asia la derecha para completar el width!

    🙂 saludos

  21. mawo dice:

    Hola como estas?
    Yo use tu menu hace un tiempo y me funciono barbaro, pero ahora quise usarlo nuevamente y me genera un error en ie6 y ie7, en donde se me corre el subnenu hacia un costado.
    Me podes dar una idea de como se podría solucionar esto?

  22. Leonardo dice:

    Muy buen tutorial! Muchas gracias. Quedo muy bien el menú!

  23. cesver dice:

    Hola,

    Excelente recurso, pero como hago para que los submenus no salgan con transparencia?

    Muchas gracias …….

  24. cesver dice:

    Hola,

    Nuevamente, he estado usando este recurso que por cierto es muy bueno, gracias, pero me gustaria saber si se puede extender un poco y saber si puede hacer scrollable.

    Saludos …..

  25. DIANA dice:

    POR FAVOR PODRIAS EXPLICARME POR QUÉ COLOCASTE ESTA LINEA? NO ENTIENDO para que clocaste ese mayor igual, gracias $(‘#nav>li’).hover

  26. DIANA dice:

    digo ese signo mayor ahi q hace??

  27. Maxi Scarpatti dice:

    Hola! Muy buen aporte para los que recien empezamos con el diseño web. Antes que nada muchas gracias!
    Tenia una consulta. Use el menu animado con jquery y realice cambios en el tamaño de las letras dentro del submenu y el fondo que cambia de color al pasar el mouse por los submenu no alcanzan todo el boton y me queda despintada una parte y quiero que ocupe todo el bloque de cada submenu. Se entiende??
    Ojala puedan ayudarme!! abrazo a todos!

  28. Pedro Salinas dice:

    Hola, muy bueno el tutorial. de verdad lo haces es todo un exito. bueno hice todo lo que dice en el tutorial pero me sale un mensaje de error (estoy trabajando con dreamweaver) de sintaxis en la linea 10. espero puedas ayudarme por favor.
    Bendiciones.

  29. Rodrigo dice:

    Hola, estoy implementando este buen submenu y todo funciona, pero resulta que justo debajo he puesto un slider que se contrapone al submenu cuando éste se despliega, mi pregunta es: tiene esto que ver con el z-index? y de ser así, como lo soluciono? alcanzo a ver que el submenu “sale” pero se coloca debajo de la imagen del slider :S

  30. Borja dice:

    Hola David una pregunta si en vez de tener
    Submenu 1

    tenemos <html:link como se pondria? es que yo uso etiquetas de struts.

    Gracias

  31. Jhon009 dice:

    Hola, primero que todo, gracias por este gran tutorial, solo pido una ayuda, ¿en dónde puedo encontrar el plugin backgroundPosition? Ya que no se encuentra en ninguno de los dos enlaces que publicaste. Gracias de antemano.[Enlaces NoFound] http://archive.plugins.jquery.com/files/jquery.backgroundPosition.js_7.txt
    http://archive.plugins.jquery.com/project/backgroundPosition-Effect

  32. Matiux dice:

    Hola… tengo una duda!!! Kmo le puedo hacer para hacerlo vertical… ya lo intente de varias formas pro no me queda… al iniciar la pagina me muestra el contenido de los submenus y los oculta hasta que paso el puntero por cada una de las opciones…. helpmeeee!!!!!!!

  33. gracias compañero esta excelente me ayudo mucho con unas serie de dudas que no son de esclarecer la mayoría de informantes de la red nuevamente gracias

  34. Andres dice:

    Hola David gracias por el tutorial! quisiera saber como hago para que mi menu izquierdo http://abits.com/GrupoAbitszzz/index.php/sap-business-analytics/sap-bi cuando lo despliego se quede asi y me permita ver el submenu a medida que voy visitando cada submenu, o sea que no se esconda… gracias de antemano.

  35. recetas dice:

    Un menu muy interesante, voy a implementarlos en mis proyectos

  36. Aldair Ramos dice:

    La verdad muy interesante, me sirvió de mucho

  37. Guillermo dice:

    Ahora como hago para que el menu se muestre por encima de un frame?

    Te agradeceria mucho respondas esta pregunta , tengo 2 frame , el menu ira en el superior pero quisiera ver el submenu por encima del frame inferior, desde ya muchas gracias…

  38. Guillermo dice:

    Podrías enviarme un ejemplo a mi correo de como seria con 2 frame , mi correo es besares.guillermo@hotmail.com, gracias por tu ayuda

  39. Jose Ignacio dice:

    Hola David, gracias por compartir el tutorial, es justo lo que estaba buscando.

Deja un comentario

Introduce tu información personal en el formulario, regístrate o identifícate usando twitter con el siguiente botón.

Time limit is exhausted. Please reload the CAPTCHA.

RSS iTunes podcast Twitter

Categorías

Enlaces

Archivos