Tras 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.
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> |
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
@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.
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
@daniel Aquí puedes descargarlo, guardalo y cambia la extensión a .js
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
@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.
Hola david, pregunto, éste menú funciona a n niveles ó solo a 2.. Gracias por el aporte
@Jorge Sólo a 2. Existen plugins de jQuery, como el ‘superfish’, que permiten más niveles si no recuerdo mal.
Muchas gracias David !! Me ha venido genial el código.
Saludos.
Hola David, excelente trabajo en serio, me ayudo a resolver un problemita, muchas gracias 🙂
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!
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
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.
@Dumst No sé si es esto lo que buscas: Menú vertical en acordeón multinivel
Gracias por este menú deplegable
Muy Bueno
Que tal, gracias por el codigo. Tengo un problema, no me funciona en chrome. Tengo que agregar algo??
@Nataly siempre trabajo con chrome, funciona perfectamente, ¿qué problema te da?
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).
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.
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??.
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
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?
Muy buen tutorial! Muchas gracias. Quedo muy bien el menú!
Hola,
Excelente recurso, pero como hago para que los submenus no salgan con transparencia?
Muchas gracias …….
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 …..
POR FAVOR PODRIAS EXPLICARME POR QUÉ COLOCASTE ESTA LINEA? NO ENTIENDO para que clocaste ese mayor igual, gracias $(‘#nav>li’).hover
digo ese signo mayor ahi q hace??
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!
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.
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
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
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
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!!!!!!!
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
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.
Un menu muy interesante, voy a implementarlos en mis proyectos
La verdad muy interesante, me sirvió de mucho
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…
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
Hola David, gracias por compartir el tutorial, es justo lo que estaba buscando.
http://ammarabeautyofficial.blogspot.com/2018/07/testimoni-dan-review-set-serum-melacep.html
blog topic
testimoni Set serum Melacep mary Kay
blog topic
cara Agar muka tidak berminyak
blog topic
http://ammarabeautyofficial.blogspot.com/2018/07/mary-kay-botanical-effects-testimoni.html
blog topic
game slot online terbaik
Menú animado desplegable con CSS y jquery « David Rojas – Diseño y desarrollo web
daftarslotonline02333.dailyblogzz.com
Menú animado desplegable con CSS y jquery « David Rojas – Diseño y desarrollo web