Blog
Blog sobre programación y diseño en la web
Creando un menú vertical desplegable con jQuery
Translate this page into EnglishAprovechando el final del tutorial sobre selectores de jQuery vamos a ver cómo hacer un sencillo menú vertical desplegable con jQuery. Hay veces que un menú tiene varios submenús que por simplicidad visual no queremos que aparezcan hasta que no se pulse sobre la opción de cabecera del submenú. Gracias a jQuery podemos lograrlo con facilidad. Esta es la demo de lo que vamos a hacer.
Empezaremos con una simple lista de enlaces:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <ul class="navegador">
<li><a href="#" title="Opción 1">Opción 1</a></li>
<li><a href="#" title="Opción 2">Opción 2</a></li>
<li><a href="#" class="desplegable" title="Opción 3">Opción 3</a>
<ul class="subnavegador">
<li><a href="#" title="Ir a Sub-Opción 3-1">Sub-Opción 3-1</a></li>
<li><a href="#" title="Ir a Sub-Opción 3-2">Sub-Opción 3-2</a></li>
<li><a href="#" title="Ir a Sub-Opción 3-3">Sub-Opción 3-3</a></li>
<li><a href="#" title="Ir a Sub-Opción 3-4">Sub-Opción 3-4</a></li>
</ul>
</li>
<li><a href="#" class="desplegable" title="Opción 4">Opción 4</a>
<ul class="subnavegador">
<li><a href="#" title="Ir a Sub-Opción 3-1">Sub-Opción 3-1</a></li>
<li><a href="#" title="Ir a Sub-Opción 3-2">Sub-Opción 3-2</a></li>
<li><a href="#" title="Ir a Sub-Opción 3-3">Sub-Opción 3-3</a></li>
<li><a href="#" title="Ir a Sub-Opción 3-4">Sub-Opción 3-4</a></li>
</ul>
</li>
</ul> |
Como veis he añadido tres clases, una que he llamado navegador para el ul principal de la lista, otra que he llamado subnavegador para cada ul secundario y otra que he llamado desplegable para los enlaces principales de cada subnavegador.
Si ahora viéramos el menú nos saldrían todas las opciones a la vez, lo que sería un poco lío visual para el usuario. Lo que queremos es ocultar los submenús y no mostrarlos hasta que el usuario no quiera verlos. Para ello vamos a empezar por cargar jQuery. Dentro del head de nuestro código html escribiríamos:
1 2 3 4 5 6 | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ // Aquí irá el código de jQuery. }); </script> |
En la primera línea hemos cargado jQuery desde la librería de Google. Tened en cuenta que si estáis usando Wordpress no hará falta esta línea ya que Wordpress incorpora jQuery por defecto. Aunque si queréis que Wordpress no utilice su versión de jQuery y preferís que la cargue desde Google lo único que hay que hacer es añadir estas líneas al archivo functions.php de vuestro tema:
1 2 3 4 5 | if( !is_admin()){ wp_deregister_script('jquery'); wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"), false, '1.3.2'); wp_enqueue_script('jquery'); } |
Bueno, seguimos. La línea tres lo que dice es que cuando el documento esté listo se ejecute la función que sigue a continuación, que es donde vamos a crear el código para desplegar los submenús. Para una mayor explicación de esta línea podéis ver la Introducción al Curso de jQuery.
Vamos a empezar con las líneas de código de jQuery. Lo primero que queremos hacer es ocultar todos los subnavegadores. Como los hemos identificado a todos ellos con la misma clase haremos:
1 | $("ul.subnavegador").hide(); |
Es decir, primero hemos seleccionado todos los ul con la clase subnavegador. Y luego, a la selección resultante, le hemos aplicado el método de jQuery .hide() que símplemente oculta la selección tal y como si hubiéramos hecho display: none en CSS.
Como habréis visto en el ejemplo, los enlaces que se despliegan llevan una flecha roja que apunta hacia abajo con la finalidad de indicar que son desplegables. Mediante CSS aplico esta flecha roja a los enlaces con la clase desplegable (ver código fuente del ejemplo).
Seguimos con nuestras líneas de jQuery. Ahora lo siguiente que queremos es que cuando se pulse sobre el enlace desplegable se despliegue la lista de opciones del submenu correspondiente. Es decir, queremos que pase esto:
Para ello vamos a utilizar el método .toggle() de jQuery que captura los clicks que hacemos sobre el elemento seleccionado y con cada click ejecuta una acción. El método .toggle() toma dos o más argumentos, cada uno de los cuales es una función. El primer click sobre el elemento hace que se ejecute la primera función, el segundo click hace que se ejecute la segunda función, y así sucesivamente. Vamos a añadir el método a nuestro código, aplicando toggle() sobre cualquier enlace que tenga la clase ‘desplegable’:
1 2 3 4 5 6 7 8 | $("a.desplegable").toggle( function() { // Primera función, que se ejecuta con el primer click }, function() { // Segunda función, que se ejecuta con el segundo click } ); |
Ahora vamos a ver qué ponemos dentro de cada función. Vamos con la primera. ¿Qué queremos que ocurra con el primer click? Que se despliegue la lista de submenús, pero sólo la de la opción sobre la que se ha hecho click, es decir, sólo el submenú perteneciente al enlace con class=”desplegable” sobre el que se ha hecho click.
Para saber sobre qué elemento específico se ha hecho click utilizamos $this(), que es como decir este, el elemento único sobre el que se ha hecho click de entre los de la selección anterior. Pero no es este elemento el que nos interesa, sino todo el submenú que está oculto y que queremos mostrar, es decir, el ul class=”submenu” que corresponde al enlace cliqueado. ¿Cómo lo seleccionamos? Para ello he seleccionado al padre del elemento a cliqueado (es decir, el “li” padre del “a class=”desplegable” y una vez me he situado ahí he aplicado el método .find() para seleccionar el “ul.submenu” que se encuentra dentro del mismo. A la selección resultante le he aplicado el método de jQuery .slideDown() (es decir deslizar hacia abajo) que hace que cualquier elemento seleccionado que esté oculto se muestre gradualmente incrementándose su tamaño vertical:
1 | $(this).parent().find("ul.subnavegador").slideDown('fast'); |
El método .slideDown puede tener como parámetro opcional la velocidad con la que se va a mostrar el elemento oculto. Puede ser slow (lento), normal o fast (rápido). Si no ponemos nada será normal.
Vamos ahora con la segunda función, la que se ejecutará la segunda vez que hagamos click sobre el mismo elemento:
1 | $(this).parent().find("ul.subnavegador").slideUp('fast'); |
Al igual que antes con $this() seleccionamos el elemento único sobre el que se ha cliqueado (un elemento a class=”desplegable”). Luego seleccionamos a su padre (el li correspondiente) y luego encontramos dentro de este el “ul class=”subnavegador” que vamos a ocultar de manera gradual con el método .slideUp(), que es el contrario de .SlideDown(). El método .slideUp() hace que el elemento o elementos seleccionados no ocultos se oculten gradualmente disminuyendo su altura vertical. Soporta también los parámetros slow, normal y fast.
Con lo cual ya tenemos todo nuestro código de jQuery listo:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ // Script del Navegador $("ul.subnavegador").hide(); $("a.desplegable").toggle( function() { $(this).parent().find("ul.subnavegador").slideDown('fast'); }, function() { $(this).parent().find("ul.subnavegador").slideUp('fast'); } ); }); </script> |
Vamos a verlo dentro de todo el código HTML de la página:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">
<head>
<title>Emenia Demo - Menú vertical desplegable con jQuery</title>
<link rel="stylesheet" type="text/css" href="css/default.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){ // Script del Navegador
$("ul.subnavegador").hide();
$("a.desplegable").toggle(
function() {
$(this).parent().find("ul.subnavegador").slideDown('fast');
},
function() {
$(this).parent().find("ul.subnavegador").slideUp('fast');
}
);
});
</script>
</head>
<body>
<div id="contenido-demo">
<h2>Menú vertical desplegable con jQuery</h2>
<ul class="navegador">
<li><a href="#" title="Opción 1">Opción 1</a></li>
<li><a href="#" title="Opción 2">Opción 2</a></li>
<li><a href="#" class="desplegable" title="Opción 3">Opción 3</a>
<ul class="subnavegador">
<li><a href="http://www.google.es" title="Ir a Sub-Opción 3-1">Sub-Opción 3-1</a></li>
<li><a href="#" title="Ir a Sub-Opción 3-2">Sub-Opción 3-2</a></li>
<li><a href="#" title="Ir a Sub-Opción 3-3">Sub-Opción 3-3</a></li>
<li><a href="#" title="Ir a Sub-Opción 3-4">Sub-Opción 3-4</a></li>
</ul>
</li>
<li><a href="#" class="desplegable" title="Opción 4">Opción 4</a>
<ul class="subnavegador">
<li><a href="#" title="Ir a Sub-Opción 3-1">Sub-Opción 3-1</a></li>
<li><a href="#" title="Ir a Sub-Opción 3-2">Sub-Opción 3-2</a></li>
<li><a href="#" title="Ir a Sub-Opción 3-3">Sub-Opción 3-3</a></li>
<li><a href="#" title="Ir a Sub-Opción 3-4">Sub-Opción 3-4</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html> |
Os podéis descargar todo el código e imágenes aquí.
Otras lecturas recomendadas
Sobre .toggle(), en la web oficial de jQuery.
Sobre .slideDown() en la web oficial de jQuery.
Sobre .sliceUp() en la web oficial de jQuery.
40 Comentarios a “Creando un menú vertical desplegable con jQuery”:
Escribir un comentario
XHTML: Puedes usar estos códigos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">
Sabes…tengo un problema, el menu en si..funciona…se desplega super bien y todo..el problema es con los links que estan dentro de Subnavegador…cuando les hago click..no van a ningun lado, agradeceria tu ayuda.
Saludos”
Hola Juan Francisco,
Pues tienes razón… al no detallar el enlace sobre el que se hacía toggle() se aplicaba sobre todos los enlaces inutilizándolos. Lo he cambiado aplicando la clase “desplegable” al enlace superior de cada submenú. Gracias por indicármelo. Si te puedo ayudar en algo más dímelo.
WoU!…Muchas gracias por la rapida respuesta ahora funciona sin problemas..
Que tal !!!
Excelente, estuve buscando mucho en internet y el tuyo fue el que mas me gusto, enteramente en jQuery contrario a la mayoria que hacen uso de css.
Saludos.
Muchas gracias!
Muy bueno! Llevaba tiempo buscando algo así pero nunca conseguía que funcionaria!
Tengo una pregunta.a ver como me explico…
cuando haces click en el subnavegador se habré la página enlazada. hasta ahí todo bien. El caso es que para volver al subnavegador hay que hacer click otra vez para desplegarlo otra vez. Me gustaría que ese subnavegador se quedaria desplegado si estas en una página que está dentro de ese menu, y que se cierre solo cuando cambias de subnavegador. No se si me explicado, ni si es posible. Agradecería saber como es posible hacer algo así.
muchas gracias. Un saludo
Hola ART-o,
Me alegro que te haya sido de utilidad.
Aquí el secreo de que estén desplegados los submenús o no es esta línea:
Lo que puedes hacer es identificar cada subnavegador (si tienes varios) con nombres de clases distintas y luego hace un condicional del tipo: si estoy en la página tal en la cual un subnavegador determinado (por ejemplo uno con la clase “subnavegador3″)debe estar desplegado pondrías:
O si quieres que aparezca desplegado pero después de un pequeño efecto de despliegue hacia abajo:
Mira a ver si te funciona bien. Si tienes alguna duda dímelo.
Juan………
Muchas gracias!! lo probaré y te comento!
Juan Diaz,
podria regalarme con um ejemplo que necesito.Bueno a mi me gustaria poner este menu en una caja a la izquierda de la pantala.Pero cuando se hace un click en una de las opciones, el href=”#” se abre la pagina a la derecha de la misma pantala. Gracias.
Joseb
Minas Gerais-Brazil
Hola joseb,
No acabo de hacerme una idea de lo que me comentas. ¿Tienes un ejemplo que pueda ver y así ayudarte?
Hola Juan,
Estuvo leiendo sobre el menu (Acordion),cuando se hace un click en la opcione se abre una caja con el texto entre la opciones.Yo queria que hubiera sido así.
una caja con el menu con un borde de color y cuado yo elegir una de las opciones los textos se les mostren a la derecha de la pantalla.Es como se fuera un frame.Arriba lo header,a la izquerda el menu, y el resto del espacio se queda para mostra el contenido de una pagina web.
Yo tengo un ejemplo mas claro.Gracias! Joseb.
Hola Juan,
Yo no tengo un exemplo que puedas ver.Joseb.
Excelente ejercicio. Muchas gracias por ser tan claro y compartir.
Muy buenas
He estado buscando mucho por Internet y este ejemplo me ha venido muy bien, pero quería saber si se podían ocultar los menús desplegables que estuvieran abierto cundo se picase en otro menú desplegable, es decir, si el menú desplegable de la opción 3 estuviera abierto y le damos a la opción 4, que se cierre el 3 y luego se abra el cuatro, esto podría hacerse y como¿?. un saludo
Hola Saul,
Mira a ver si te vale http://www.emenia.es/lista-desplegable-y-plegable-con-jquery/
Sino dímelo y buscamos otra solución.
Hola juan, he estado trasteando un poco con tu código y conseguí lo que quería pero con un problemilla, aki te dejo el código:
le añadí la función $(“ul.subnavegador”).hide(), cuando haces el primer click, eso da el efecto que yo quería, pero por ejemplo, si pincho en la opción 3, luego en la opción 4, la 3 se cerraría y la cuatro se abre pero si quiero volver a desplegar la 3 tendría que pulsar dos veces, ya que para la opción tres sigue siendo el segundo click, es decir cerrar, me preguntaba si hay alguna manera de saltarse ese segundo click.
Gracias por tu ayuda juan
Hola Saúl,
Si, ya veo lo que dices, ese código no valdría para lo que quieres conseguir. He estado mirando como hacerlo, prueba con esto:
El ejemplo lo tienes aqui: Menú desplegable con jQuery 2
Como verás le he puesto la clase “desplegable” a los enlaces que se pueden desplegar. El html sería:
<ul class="navegador"> <li><a href="#" class="desplegable" title="Venta" rel="nofollow">Venta</a> <ul class="subnavegador"> <li><a href="#" title="Viviendas" rel="nofollow">Viviendas</a></li> <li><a href="#" title="Aparcamientos" rel="nofollow">Aparcamientos</a></li> </ul> </li> <li><a class="desplegable" href="#" title="Alquiler" rel="nofollow">Alquiler</a> <ul class="subnavegador"> <li><a href="#" title="Viviendas" rel="nofollow">Viviendas</a></li> </ul> </li> <li><a href="#" title="Oficinas" rel="nofollow">Oficinas</a></li> <li><a href="#" title="Ofertas" rel="nofollow">Ofertas</a></li> <li><a href="#" title="Oficina de Ventas" rel="nofollow">Oficina de Ventas</a></li> </ul>Hola juan,
Me ha funcionado a la perfección, lo último que pusiste, muchísimas gracias por tu ayuda, y espero que esto le sirva a mucha más gente.
Un saludo, y hasta otra.
Hola Juan,
He estado mirando este post y está muy explicado pero al realizarlo me surge un problema. Tengo dos botones que se desplegan pero al desplegarse el segundo botón no se desplaza hacia abajo, quedando el menú desplegable parcialmente tapado por el botón de abajo. A ver si me puedes echar un cable, gracias.
Hola Mig-Saa,
Has probado la revisión que hice de este artículo?
http://www.emenia.es/creando-un-menu-vertical-desplegable-con-jquery-2/
Mira a ver si te funciona y si no dímelo y lo vemos.
Juan……
Hola Juan, me he mirado el post jquery2 y el problema persiste. Creo que no he explicado bien, es que soy muy novato en esto, jaja. Bueno lo que yo quiero es cambiar los títulos escritos por imagenes y cuando me ponga encima la imagen cambie. Yo lo he hecho pero solo lo consigo con el título puesto, si quito el contenido de opición 3 me desaparece el título y no sale la imagen, que la he llamado por la clase desplegable. Lo he probado de muchas formas diferentes, dando la clase al li que contiene el a.desplegable, pero el resultado no es correcto y solo quiero saber si puedo poner imagenes en todas esas opciones o si he de mantener el texto dentro del contenido .
No se, ya te digo que de mi ignorancia sobre estos temas se me escapa una solución o si simplemente no se puede hacer.
Igualmente agradezco tu ayuda y ha sido una suerte encontrar tu página.
Gracias y hasta pronto!!!!
Hola, ¿No tendrás un ejemplo que pueda ver para así saber lo que estás haciendo y ayudarte?
Juan…….
Buenas, ¡Ya está!, por fin lo he conseguido, pero creo que me liado mucho para hacerlo. Me gustaría que lo vieras pero no se como enviarlo. Igualmente he aprendido mucho de tus posts. También he hecho algunos cambios en el código (porque lo vi en una de las intervenciones del mismo post), porque yo quería que siempre estuviera visible y que la opción de recogerse solo lo hiciera al hacer click.
si quieres dime como enviarlo.
Muchas gracias!
muy buenas tarde sr dias
la verdad me gusto mucho su menu y lo implemente en un programa pero tengo un gran problema, lo que pasa es que necesito que cuando yo le de click en una opcion me almacene esa opcion que yo seleccione en una variable cree que se pueda hacer esto??
Hola Ivan,
Gracias por tu comentario. Entiendo que necesitas que ese valor almacenado pase a la página a la que se llega mediante esa opción del menú? Si estás programando en PHP la manera de hacerlo sería mediante un $_GET, es decir, imagínate que el enlace fuera algo así:
De esta manera estás pasando a la página productos una variable que se llama id y que tiene un valor de 1. En la programación de la página de producto tendrías que recoger ese valor de una manera parecida a esta:
en el caso de que estemos hablando de un número como el del ejemplo, pero lo podemos hacer también con todo tipo de variables (de texto, etc). No sé si era esto lo que preguntabas.
muchissisisimas gracias sr diaz ya me quedo super bien como esperaba segui al pie de la letra sus instruccines.
cualquier cosa en que lo pueda ayudar pues con todo gusto
buen dia
De nada Ivan, me alegro que haya sido de utilidad.
buena tardes sr Diaz
una nueva consulta
como le puedo hacer para poder seleccionar varias opciones del menú
por ejemplo si tengo ciudades poder seleccionar una de estas
si tengo estados poder seleccionar un estado y si tengo delegaciones pues poder seleccionar una delegación y al final tener una solo una selección de todo el menú
cree que se pueda esto???
es que solo puedo seleccionar una en todo el menu y submenuss
Hola Ivan,
Lo que me comenta suena más a un formulario con distintas opciones seleccionables, si he entendido bien. En este caso en vez de un enlace cada opción debería ser un elemento input del formulario, con un botón al final para enviarlo?
pues sii lo puedo hacer asiii como formulario
pero la verdad me gustaria hacerlo con los efectos de suu menu
cree que se pueda
Hola, ante todo felicidades, es un gran tutorial, sencillo y muy bien explicado.
Mi duda es que intento hacer lo que pregunta ART-o pero soy incapaz.
¿crees que podrías poner algun ejemplo?
Con el condicional he probado de muchas maneras, pero no se me mantiene abierto tras pinchar en el enlace.
¿Algún ejemplo rápido básico?
Gracias de antemano y a seguir así!.
Byee
Hola Ivan, Para elegir varias opciones a la vez tiene que hacerse vía formulario, no se me ocurre otra manera. De todas formas se puede crear el mismo efecto sólo que en vez de aplicarlo sobre una lista de elementos se aplicaría sobre cada input.
Hola Pep, gracias por el comentario. El secreto estaría en identificar el ul que quieres que se mantenga desplegado. Eso lo lograrías por ejemplo con una clase en el elemento body de la nueva página en la que aterrizas combinado con la clase del ul que se mantenga desplegado y así lo identificas para aplicarle .show()
Gracias, probaré a ver que pasa. Un saludo
Una Consulta, como puedo hacer que este mismo menú sea multinivel, intente aplicando “desplegable” a un submenú, pero cuando despliego el superior…ya me aparece desplegado el siguiente nivel.
Saludos!
Hola Juan,
Tendrías que dar el nombre de una clase a la etiqueta ul del nivel que quieras que aparezca desplegado y con aplicarle la función show() ya te aparecería desplegado.
uHmm…no logro entender bien…mira…en este ejemplo:
- Nuestra Empresa
- Noticias
-Empresas
-Nuestra Empresa
-Otras Empresas
– Ciudad
– Empleados
- Actividades
- Capacitación
Llego bien hasta el Menu Noticias…el cual despliega EMPRESAS, CIUDAD, EMPLEADOS, pero no logro hacer que el submenú EMPRESAS aparezca colapsado…para hacer click y recien ahi se despliegue, si no que aparece desplegado inmediatamente al hacer click sobre NOTICIAS.
Gracias!
Apareció sin la indentacion:
- Nuestra Empresa
- Noticias
——–Empresas
————Nuestra Empresa
————Otras Empresas
——–-Ciudad
–——-Empleados
- Actividades
- Capacitación
Hola,
Encontre tu código y es excelente para lo que necesito, pero el enlace del submenu no me funciona, no va a ninguna parte. Podrías explicarme como arreglar esto.
Muchas gracias
Gracias Yoli,
En el enlace del submenu puedes poner ya tu lo que consideres. En el ejemplo está puesto href=”#” para que no lleve a ninguna parte.
Hola,
Lo primero gracias por este articulo, me ha venido de maravilla. Hice unas pruebas y me funciona bien. Ahora quiero personalizarlo y quitandole el texto y poniedole imagenes, como comenta Mig-saa.
He probado de varias maneras y no lo consigo. Te dijo Mig-saa como lo hizo?
Gracias de antemano!