Creando un menú vertical desplegable con jQuery

Aprovechando 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:

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:

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:

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:

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).

li-desplegable

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:

li-desplegado

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’:

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:

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:

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:

Vamos a verlo dentro de todo el código HTML de la página:

Os podéis descargar todo el código e imágenes aquí.

Otras lecturas recomendadas

Nueva versión de este artículo: Creando un menú vertical desplegable con jQuery (2)
Sobre .toggle(), en la web oficial de jQuery.
Sobre .slideDown() en la web oficial de jQuery.
Sobre .sliceUp() en la web oficial de jQuery.

114 comentarios en “Creando un menú vertical desplegable con jQuery

  1. 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.

  2. 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.

  3. 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

  4. 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………

  5. 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

  6. 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.

  7. 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

  8. 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:

  9. 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.

  10. 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.

  11. 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!!!!

  12. 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!

  13. 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.

  14. 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

  15. 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?

  16. 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()

    • 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.

  17. 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!

  18. 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.

  19. 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!

  20. Re holas muy buen tuto (lastima que despues de un año de la publicacion conoci la pagina XD ), una duda que me a surgido y lo he modificado pero no hay caso, cuando pone…

    $(“ul.subnavegador”).hide();
    $(“ul.subnavegador”).slideDown(‘slow’);

    Teoricamente y practicamente tendria que mostrar la lista desplegada una vez que se halla hecho clik sobre el encabezado de la lista.. pero que pasa? ya cuando lo voy a visualizar (sin tocar nada) ya aparece desplegada; y para más; me aparecen todas las listas desplegadas (haciendo una lista de 20 Cm de largo)

    me podria ayudar con eso??

  21. hola tu codigo es de maravilla, pero mi preguntas es como hacer:

    OPCION-1
    OPCION-1-1
    OPCION-1-1-1
    OPCION-1-1-2
    OPCION-1-2
    OPCION-1-3
    OPCION-2
    OPCION-3
    OPCION-4
    el problema es que al selecionar la opccion-1 se muestra los submenus y los submenus de la OPCION-1-1 y yo quisiera que al hacer click en OPCION-1-1 recien se muestren…

  22. Hola Juan, perdona no he puesto la etiqueta code en el código, repito el mensaje, he probado en un menú de wordpress 3.0 y funciona excepto los enlaces dentro del submenu que no abren, esto es debido a que WP genera la lista de forma resumida así:

    Si lo generara así me funcionaría:

    Ya que la llamada en el function la haces así:

    Otra pregunta en el efecto de desplegar el submenu y desplegar y recoger si pulsas en otro, si tengo que aplicar diferentes clases por ej. desplegado, desplegado2, desplegado3 como lo harias?

    Muchas gracias, me ha encantado leer esta entrada
    Saludos

  23. alejandro loza

    tendrias que crear una funcion para ese encabezado, dejando todas las otras en “hide”.

    $("a.encabezado").toggle(function() {         $("ul.contenidoEncabezado").hide();        $(this).parent().find("ul.contenidoEncabezado").slideDown('fast');       },      function() {         $(this).parent().find("ul.contenidoEncabezado").slideUp('fast');

  24. bueno,
    me surgio una duda tambien espero puedan ayudarme.

    este es mi menu todo cerrado, funciona perfecto.
    $(document).ready(function(){ // Script del Navegador                        $("ul.sub1_ul").hide();                        $("ul.sub2_ul").hide();                        $("a.btn_nivel0").toggle(                              function() {                                     $(this).parent().find("ul.sub1_ul").slideDown('fast');                               },                              function() {                                     $(this).parent().find("ul.sub1_ul").slideUp('fast');                               }                                                );                              $("a.btn_nivel1").toggle(                              function() {                                     $(this).parent().find("ul.sub2_ul").slideDown('fast');                               },                              function() {                                     $(this).parent().find("ul.sub2_ul").slideUp('fast');                               }                                                );                        });

    Pero necesito que en cada pagina el uno de los contenidos este abierto, por lo que voy y le digo que abra asi (codigo), el problema no es que los despliegue si no que para cerrarlos una vez estan abiertos me pide hacer doble click y ya no solo uno como antes.. como podria solucionarlo.

    $(document).ready(function(){ // Script del Navegador                        $("ul.sub1_ul").slideDown("slow");                        $("ul.sub2_ul").hide();                        $("a.btn_nivel0").toggle(                              function() {                                     $(this).parent().find("ul.sub1_ul").slideDown('fast');                               },                              function() {                                     $(this).parent().find("ul.sub1_ul").slideUp('fast');                               }                                                );                              $("a.btn_nivel1").toggle(                              function() {                                     $(this).parent().find("ul.sub2_ul").slideDown('fast');                               },                              function() {                                     $(this).parent().find("ul.sub2_ul").slideUp('fast');                               }                                                );                        });

    saludos espero puedan ayudarme

  25. Pingback: Método .toggle() | DISANING WEBS

  26. hola que tal muy interesante tu menu y funciona a las mil maravillas, lo que pasa es que soy un poco nuevo en esto de jquery y estoy tratando de hacer que el subnavegador a la vez se convierta en desplegable, no se si me explico, muy buen blog

  27. Hola, tengo una situación un poco rara, lo que pasa es que el menú funciona correctamente, pero cuando el contenido de la página es muy largo, el menú se esconde hasta que termina de cargar toda la página y no desde el principio, el código que utilizo es el que muestras en éste ejemplo.

    Gracias

  28. Hola,

    Este artículo me ha servido de mucha ayuda. Pero tengo un problemilla. Inicialmente el menu aparece desplegado, que al hacer click se esconde. Pero si voy a una página y regreso, vuelvo a tenerlo todo desplegado, incluso el menú que había escondido. Me gustaría que se mantuviera el estado de abierto y cerrado aunque vaya a una página y vuelva. ¿Cómo podría hacerlo?

    Gracias.

    • Hola Silva,

      Ten en cuenta que al salir de la página y volver a entrar esta se refresca y se carga de nuevo. La única manera que tienes de hacerlo más dinámico es con PHP.

        • Tienes que jugar con la clase que aplicas al elemento que quieras que aparezca oculto o a la vista. Puedes poner que cuando se cumpla la condición que quieras le ponga una clase u otra. Luego con jQuery puedes aplicar el show o hide a esa clase.

  29. Juan

    Junto con saludarle le informo me funciona muy el menú, pero necesito que la lista desplegable al hacer click en alguna de las opciones (me lleva a otras paginas del sitio) no de cierre la lista, solo debe cerrarse solo cuanto cambia de lista desplegable.

    De antemano gracias

    • Hola Marisela,

      Si cambias de página se empieza de cero por lo que el menú vuelve a estar plegado. La única manera es que incluyas condicionales en función de la página en la que estas y que para cada una se mantenga abierto lo que tu quieras.

  30. Muchas gracias por tu ejemplo. Debo decirte que es el más instructivo y fácil de entender de todos los que he visto en cuanto a creación de menú con JQuery.
    Muy agradecido :)

  31. Hola, buenos dias.

    Antes que nada, tu menu me ha servido de guia muy bien, a sido de los mas faciles que encontrado de entender, asi que muchas gracias.
    Lo siguiente seria preguntarte una duda sobre una modificacion que hice en tu codigo.
    En el tuyo se hacia con click, y yo lo puse para que se desplegaba cuando pasas el raton por encima. En IE, me funciona de lujo, ahora en firefox, safari y windows 7 x64 no hay manera… ¿ Se te ocurre por que podria ser ?.
    Gracias de antemano, te pego el codigo aqui.

    • Hola Sloth.

      En principio no veo qué puede ocurrir. ¿Tienes instalado web developer y firebug para firefox? Te puede ayudar a ver qué errores pueden estar produciéndose.

      • En principio lo que me dice el firebug es que $(‘.desplegable’).parent().find
        no es una funcion, y que ul.subnavegador, no lo encuentra.. pero lo tengo definido..
        no se que puede estar ocurriendo..

          • ehm… me acabas de dejar pescando xD.. lo siento por la pregunta pero.. ¿ que ? xDD
            Soy algo nuevillo en el mundo jquery…

          • Es que ese tipo de mensaje de error suele salir cuando no tienes cargado jquery. Necesitas tener cargado jquery.

          • y que tendria que hacer para cargar el jquery ?

            si es añadiendo esta linea, ya la tengo… =(

          • Y has comprobado si se ha cargado bien? Haz click sobre ver código fuente y luego haz click sobre la línea que carga jquery, para ver si te sale el código de jquery.

          • He conseguido que no me diga mas que $(‘.desplegable’) no es una funcion, cambiando la version de jquery ( de la 1.6 a la 1.3… ) pero aun me sige diciendo –No elements were found with the selector: “ul.subnavegador”–

  32. buenas,
    esta muy bueno el menu, felicitaciones, pero cuando quiero usar mas de un subnivel , los subniveles desplegables se me despliegan automaticamente.

    por ejemplo, yo tengo

    opcion1
    opcion2
    -opcion-desplegable
    —-desplegable-2
    ——-opcion1
    ——-opcion2
    ——-opcion3

    si hago clic en opcion desplegable, directamente se me despliegan todos los de desplegable 2.

    Me explico??

    tiene solucion esto?

  33. hola

    estoy viendo un caso similar al que tu tienes, es casi lo que lo mismo que el tuyo solo que no me puse a ver paginas para poderme ayudar sino solo con libros, hubiese sido mejor haber buscado por internet para no haberme demorado mucho tiempo. por cierto tu explicacion fue muy buena dicho sea de paso.
    mi consulta era la siguiente: cuando hay varios submenus el jquery por default te pone los enumeraciones(el circulito negro o cuadrado blanco), se podría poner imagenes en ves de eso?
    osea en mi caso estoy haciendo una pagina para empresa y me gustaria poner imagenes de libros pequeños a la hora de enumerar.
    te agradeceria que me pudieras dar alguna pista para poder resolver esto

  34. Hola Juan Diaz!!

    Bueno este menu me ha sido de mucha ayuda, me parece excelente. Pero tengo una pregunta que ya han hecho muchos usuarios y es la siguiente:

    Como hago para que el menu sea multinivel. Le he intentado de todo y la verdad es que no soy muy bueno con el codigo. Te agradeceria mucho que me sacaras de esta duda.

    Muchas GRacias!

  35. Tengo una pequeña duda sobre el menú, tal y como lo has puesto, funciona a la perfección, pero necesito añadir una funcionalidad más, esta es que, las cabeceras de menú (opción 1, opción2…) a la vez que plegan y desplegan el menú lleven también a un link, como lo hacen las que no desplegan nada, esto es posible?

    Trabajo con asp.net y de forma dinámica relleno el menú y le cambio los parámetros del enlace desde código para añadir la url y decir que se cierre o abra, tal que así, por si sirve de ayuda:

    pero sólo plega o desplega el menú, no me lleva a la url de destino, lo he probado también modificando tu ejemplo, pero tampoco lo consigo.

    Muchas gracias.

    • Hola Phiby, lo que sucede es que esas cabeceras o pliegan/despliegan o funcionan como enlace a otra página. Si te vas a otra página para qué quieres que se despliegue?

      • Se me olvidó comentar que trabajo con una masterpage, con lo que sólo cambia el contenido de un container central, con lo que no recarga la página entera, la necesidad es que cargue una página intermedia, para mostrar más información de todas las subcategorías.

        • Ah, ok. Mira a ver si tienes puesto return false, que evita que el enlace funcione como tal. Sino lo que puedes hacer es asignarle dos eventos al hacer click, que despliegue el menú y que cargue la página intermedia vía ajax?

  36. Buenas excelente tu código solo queria preguntar que cuando le doy click al menu despegable a parte de desplegar el submenu, tambien pueda abrir una pagina como en el submenu, o sea, las dos cosas al mismo tiempo, ya que al hacerto despegable me parece que pierde este atributo.

  37. Si alguien tiene el mismo problema que julian (se le despliegan varios niveles a la vez) simplemente tiene que cambiar el find() por un children()

    saludos

  38. Hola Juan Díaz : ) esta muy padre el menú, pero quisiera saber qué atributo en jquery puedo usar para mantener los sub-menús abiertos cuando se cambia de página???? es algún tipo de clase????

    Saludos : )

    • Gracias, la única manera sería aplicar una clase en función de la página en la que nos encontremos que haga que el menú se mantenga abierto en esa página en concreto.

      • mmmm….T.T creo que estoy un poco perdida porque no me queda, éste es el HTML:

        éste es el jquery:

        Cuál sería la estructura correcta del jquery y en el html la clase o ID que tendría que usar?????

  39. Hola Juan,

    Muchas gracias por el aporte.

    Pero me surge una duda. Necesito añadir sub sub menús. Es decir:

    - 1
    – 1.1
    -1.1.1
    -2
    -3

    ¿Cómo sería el código para que me funcione?

    Muchas gracias

  40. hola muy buenas juan lo primero felicidades por este menu con tantas posibilidades que nos has brindado, el menu funciona perfectamente le he añadido subcategorias y funciona realmente bien con firefox lo unico es que no funciona con internet explorer, el menu sale completamente desplegado con todas las subcategorias desplegadas y no funciona, el explorer es ie 10 gracias…

  41. hola muchas gracias por ese tutorial !, tengo 3 problemitas con el menú, el primero es que quiero que ya salga desplegado asi que modifiqué el código asi:

    pero problema es que para ocultarlo tengo que hacer dos veces click en los botones no hay manera de que sea solo con uno?

    2. como puedo hacer para que la fechita cambie cada vez que despliegue el menú? por ejemplo en vez de una flecha quisiera un “mas” y al desplegarse cambiara a un “menos” o simplemente desapareciera el “mas” sería eso posible?

    3. Qué tipos de efectos se le pueden añadir al slidedown?, por ejemplo un efecto de desvanecer algo asi

    Muchas gracias !

  42. UNA PREGUNTA , SE PODRIA PONER TU MENU EN UN FRAME Y SU SUBMENU  APARECIERA EN OTRO FRAME (FRAME SUPERIOR Y FRAME CENTRAL) Y SI FUECE ASI COMO SE HARIA, DESDE YA MUCHAS GRACIAS POR LA RESPUESTA

     

  43. Hola, tengo un problema. No me carga el efecto al usar una versión mas nueva de jQuery. Los li que tienen la  clase desplegable no me aparece. Quiero saber si puede ser ese el problema o se debe a otra cosa.

    Espero que me puedas responder pronto.

    Gracias!

  44. Hola estoy intentando hacer que el desplegable se abra según en la pagina en la que se esté pero no me funciona correctamente. podrías echarme una mano?

    Muchas gracias

    este sería el código html en el que creo la lista y un class para cada UL:

    y este el codigo javascript (es en lo que estoy perdidísimo)

    • Hola Luis,

      ¿Puedes poner el HTML resultante? Igual es más facil de visualizar que a través del código PHP.

      De todas formas, con PHP puedes poner una clase en el enlace que corresponda a la página en la que te encuentras, y luego a través de jQuery al enlace que tenga esa clase no lo ocultas.

      • Hola Juán. Muchísimas gracias por responder. Aquí sigo peleándome con el código…

        Hasta ahora he conseguido que el menú aparezca plegado cuando no se está en ninguna categoria del menú. Pero cuando clico en un enlace en vez de desplegarse solo la categoría que corresponde a ese enlace se me despliegan todas.

        Este sería el javascript con el que me funciona como te comento, lo que pasa es que quiero que solo se despliegue la categoria correspondiente:

        Y este sería el resultado en html según se muestra en el código fuente (muestro la parte del menú unicamente)

        • Hola! No se ve la estructura del HTML, pero puedes probar a poner simplemente un show() si estás en la categoría en vez de slideToggle? Si no pon el HTML completo del menú a ver.

          • es el menú desplegable de la derecha. Si te fijas cuando entras al index aparece plegado y clicando en cada categoria se despliega y se pliega correctamente. pero cuando se accede a un enlace de cualquier subcategoría lo que sucede es que se despliega el menú completo, cuando solo debería desplegarse el menú correspondiente a la categoría de la subcategoría donde se ha hecho clic.

            Muchísimas gracias por tu ayuda.

            Un saludo

          • Ah ok. Es que estás diciéndole que abra todas al poner

            Pon que abra sólo el de la categoría donde estás.

          • Fíjate en lo que genera el php

            Le estás diciendo que abra todos los de categoría “Ropa”, que son todos. Te faltaría poner un guión entre “Ropa” y “Chicas”.

    • Ya he visto que has arreglado lo de las categorías.Prueba ahora así:

      • Ahoooora si :)
        Muchísimas gracias de verdad.

        No quiero abusar, pero si por último pudieras indicarme como se haría para que cuando haga clic en una categoría se despliegue esa y se plieguen las otras (en el caso de estar abiertas) ya sería fantástico.

        pero vaya.. que si no te va bien no importa bastante me has ayudado.

        Muchas gracias de nuevo un saludo, te debo una ;)

  45. Hola me gustaría hacerte un preguntas acerca de un menú que me causa dolores de cabeza el menú es estilo acordeón  tiene 3 niveles pero necesito que en el nivel que den doble click se que abierto .. estoy como loca intentando buscar alguien que me ayude porfa si lo puees hacer …..

  46. Doc Muy buen post lo aplique a mi menu y me funciono a la perfeccón.

    Una consulta al momento de dar click sobre un menu para que se despliegue me resulta bien pero al mismo tiempo quiero que me mande a una pagina web ya le puse la direccion deseada cuando le doy click solo se despliega mas no me manda a la direccion alguna ayuda?

    Muchas gracias,

  47. Estuve viedno todos los post y mencionas que eso no es necesario pero en mi caso si yo tegno una sabana al lado de mi menu al momento de dar click sobre un menu me debe redireccionar a una pagina y luego se debe desplegar se despleiga pero no redirecciona es posible realizarlo?

     

    Muchas Gracias!

  48. Hola, gran aporte!! Lo estuve probando y funciona muy bien.  Quería ver si existe la posibilidad de que el menú lo tome leyendo un archivo .xml y poder variar el contenido. Realice varias pruebas pero no pude lograrlo.

    Muchas gracias!!!!

     

  49. Hola, muy bueno el post. Me fue de gran utilidad! Mi pregunta es si es posible guardar en un archivo el contenido de

    y asi poder cargarlo desde una libreria particular en lugar de la libreria de google. Yo intenté pero no tuve suerte.

    Saludos!

    • Gracias Lourdes.

      Lo mejor es intentar primero obtenerlo de un CDN como Google y si no funciona obtener uno que tengas en local:

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">