Close
Image Alt

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.

Comments

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

    27 November, 2009
    reply
  • WoU!…Muchas gracias por la rapida respuesta ahora funciona sin problemas..

    28 November, 2009
    reply
  • Juan Zapata

    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.

    1 December, 2009
    reply
  • 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 December, 2009
    reply
  • Muchas gracias!! lo probaré y te comento!

    5 December, 2009
    reply
  • joseb

    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

    12 December, 2009
    reply
  • joseb

    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.

    19 December, 2009
    reply
  • joseb

    Hola Juan,
    Yo no tengo un exemplo que puedas ver.Joseb.

    19 December, 2009
    reply
  • Excelente ejercicio. Muchas gracias por ser tan claro y compartir.

    8 March, 2010
    reply
  • saul

    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

    12 April, 2010
    reply
  • saul

    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

    15 April, 2010
    reply
  • saul

    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.

    16 April, 2010
    reply
  • Mig-saa

    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.

    14 May, 2010
    reply
  • Mig-saa

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

    15 May, 2010
    reply
  • Mig-saa

    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!

    15 May, 2010
    reply
    • Ana

      Holaa Mig-saa! Podrías compartir el código que utilizaste para añadirle a las ligas en vez de texto imagen???

      Te lo agradecería una infinidad!!!

      22 November, 2011
      reply
  • ivan

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

    26 May, 2010
    reply
  • ivan

    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

    1 June, 2010
    reply
  • ivan

    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

    2 June, 2010
    reply
  • ivan

    pues sii lo puedo hacer asiii como formulario
    pero la verdad me gustaria hacerlo con los efectos de suu menu

    cree que se pueda

    2 June, 2010
    reply
  • 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

    4 June, 2010
    reply
  • Gracias, probaré a ver que pasa. Un saludo

    5 June, 2010
    reply
  • 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!

    12 June, 2010
    reply
  • 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!

    15 June, 2010
    reply
  • Apareció sin la indentacion:

    – Nuestra Empresa
    – Noticias
    ——–Empresas
    ————Nuestra Empresa
    ————Otras Empresas
    ——–-Ciudad
    –——-Empleados
    – Actividades
    – Capacitación

    15 June, 2010
    reply
  • Yoli

    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

    23 June, 2010
    reply
  • Xabi

    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!

    31 August, 2010
    reply
  • Buenas, quisiera como puedo hacer esto en wordpress en el menú vertical.

    Muchas gracias.

    18 September, 2010
    reply
  • Wowwww!! excelente!! me va a servir muchísimo! Cuando lo tenga listo te lo paso!!

    7 October, 2010
    reply
  • 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??

    15 October, 2010
    reply
  • titonet3000

    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…

    14 November, 2010
    reply
  • javier

    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

    20 November, 2010
    reply
  • javier

    me respondo yo mismo, añadiendo:
    $(“a”).mouseover(function(event){
    $(“.branding”).addClass(“desplegado”);
    });

    20 November, 2010
    reply
  • Pablo

    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');

    29 November, 2010
    reply
  • Pablo

    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

    29 November, 2010
    reply
  • 9 January, 2011
    reply
  • Chechu

    Muchísimas gracias por tu aporte. Llevo tiempo buscando un menú de estas características, y es fantástico.

    3 February, 2011
    reply
  • kndelaria

    hola, tengo el problema ese de que el submenu no lleva a los enlaces pero sobre wordpress, agradeceria que me indiquen como puedo resolverlo.
    el link es este http://www.osteopathie-biodynamique.com/blog/
    y el enlace q desplega es el 3º item 🙂

    gracias!

    25 February, 2011
    reply
      • no lo he probado, voy a ver si lo soluciono asi, gracias!

        1 March, 2011
        reply
  • JoseOsorio

    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

    25 March, 2011
    reply
  • Sergio Soto

    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

    2 May, 2011
    reply
  • Silvia

    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.

    4 May, 2011
    reply
      • Silvia

        Yo trabajo con asp.net… ¿Me podría indicar cómo?

        4 May, 2011
        reply
  • Silvia

    Gracias

    4 May, 2011
    reply
  • marisela cornejo

    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

    11 May, 2011
    reply
      • marisela cornejo

        ok, gracias.

        11 May, 2011
        reply
  • gabrielvilu

    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 🙂

    15 June, 2011
    reply
  • Sloth^

    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.

    16 June, 2011
    reply
      • Sloth^

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

        17 June, 2011
        reply
          • Sloth^

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

            17 June, 2011
          • Sloth^

            y que tendria que hacer para cargar el jquery ?

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

            17 June, 2011
          • Sloth^

            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”–

            17 June, 2011
  • julian

    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?

    25 June, 2011
    reply
  • melissa

    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

    14 December, 2011
    reply
  • 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!

    20 December, 2011
    reply
  • ¡Gracias por este tutorial! Funciona genial, ¡qué sería de internet sin gente tan generosa como tú!

    5 January, 2012
    reply
  • Philby

    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.

    31 January, 2012
    reply
      • Philby

        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.

        31 January, 2012
        reply
  • Jeanmar

    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.

    16 March, 2012
    reply
  • Gerard

    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

    2 April, 2012
    reply
  • Maria

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

    12 April, 2012
    reply
      • maria

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

        13 April, 2012
        reply
  • jorge

    El menu esta genial pero como se puede hacer para que funcione en internet explorer??, muchas gracias

    7 May, 2012
    reply
  • Cristina

    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

    14 May, 2012
    reply
  • juan pedro

    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…

    13 August, 2012
    reply
  • adan

    Es decir una vez que se hace click en un elemento lo muestra, aun cuando se realice un refresh(F5) de la pagina.

    21 August, 2012
    reply
  • luis

    Hola Juan, cual es la manera de hacer que el menú desplegable no desplaze los divs que tiene por debajo?.
    Gracias

    7 October, 2012
    reply
  • Davy0324

    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 !

    27 April, 2013
    reply
  • GUILLERMO

    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

     

    23 May, 2013
    reply
  • Gonzalo

    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!

    1 August, 2013
    reply
  • Luis

    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)

    9 September, 2013
    reply
      • 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)

        10 September, 2013
        reply
          • 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

            10 September, 2013
  • Nada que no doy con la tecla 🙁

    Muchas gracias de todos modos

    Un saludo

    10 September, 2013
    reply
      • 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 😉

        10 September, 2013
        reply
        • Anda, me acabo de dar cuenta de que con tu código cuando vas a la página principal se quedan todas desplegadas cuando deberían quedarse plegadas…

          10 September, 2013
          reply
  • Lucia

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

    13 November, 2013
    reply
  • 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,

    27 December, 2013
    reply
  • 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!

    27 December, 2013
    reply
  • 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!!!!

     

    3 January, 2014
    reply
  • Lourdes

    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!

    2 June, 2014
    reply
  • Paulo

    Eres un genio..te voy a hacer un altar.. XD era lo que estaba buscando por semanas..gracias!!!

    25 February, 2015
    reply
    • Paulo

      Quisiera saber como es en el caso de tener 3 niveles de lista ya que aquí son 2 y me funciona perfecto, pero yo tengo un menu de 3 niveles y cuando le doy click a cualqier elemento del 1er nivel se despliegan tanto el segundo como el tercero y se supone que deberia ser solo el segundo..no se si me dejo entender :).. gracias por tu respuesta..

      4 March, 2015
      reply

Post a Comment