Creando un menú vertical desplegable con jQuery (2)

Tras una pregunta de Saúl sobre el artículo Creando un menú vertical desplegable con jQuery en la que me preguntaba cómo lograr que al abrir una opción del menú se cerrara cualquier otra que estuviera abierta (podéis ver la pregunta en la zona de comentarios del artículo anterior) he actualizado (bueno, básicamente cambiado) el código para que pueda hacerse lo que pide Saúl. Aunque lo he puesto en los comentarios respondiéndole me he animado a crear una nueva entrada por si a alguien le fuera de interés.

Lo que queremos conseguir es esto: Ejemplo de menú vertical desplegable con jQuery con efecto acordeón

Como veréis en el ejemplo, el código HTML completo del navegador es:

Y el código jQuery que lo hace posible:

Si tenéis alguna pregunta no dudéis en preguntar.

68 comentarios en “Creando un menú vertical desplegable con jQuery (2)

  1. Puse a funcionar en una web un menú desplegable armado con jquery. El problema es que ahora se han incorporado muchos contenidos nuevos y cada vez que agrego algo debo agregar botones al menú. Por ende actualizar los y de cada HTML. ¿Hay alguna forma de llamar un archivo externo al HTML, que contenga todo el desarrollo del menú? Así podría actualizar solo un archivo de menú cada vez que se necesita.

    ¡Gracias!

    1. Hola Eugenia,
      ¿Sabes programar en PHP? Hacer lo que me dices en PHP es muy sencillo, simplemente con un include llamarías a la parte del menú.

  2. que tal Juan!
    Gracias por compartir conocimiento. Te cuento, estoy haciendo un menú acordeón con jquery bastante parecido al que indicas en este post, este lo estoy aplicando a una plantilla wordpress. El problema que me tiene urgido es que necesito, que al pinchar un link del submenu desplegado, este no desaparezca y que a la vez quede activo al abrirse la pagina (link) correspondiente.
    Espero hacerme entender y que te animes a explicar esto, (si no es muy complejo y mucha mi patudez), he estado buscando la solución, pero…

    desde ya, muchas gracias!

  3. Hola Juan,

    Gracias por compartir tus conocimientos. Me funciona bien tu menu, pero le veo una pega. Es lo mismo que comenta Pablo. Estaria bien que mientras no cambiemos de submenu el mismo no desaparezca, que siga abierto hasta que abramos otro submenu.

    En otro articulo ya pones como seria la logica pero como no se programar en jquery pues no lo puedo. Estaria bien que nos pudieras explicar o dar alguna pista. Si no es mucho pedir.

    Gracias de todas formas!

  4. Hola, gracias por esto mega tutoriales, me ayudaron monton, mi pregunta es si esto se puede hacer multinivel (no solo dos)… y que debo modificar en el CSS…
    Lo que intento hacer es algo como un arbol de desciciones mediante etas listas…

    saludos

  5. No logro que me funcione el efecto acordeon! al colocar los codigos exactamente igual no sucede nada, sino que me aparece como si fuera una lista a pesar que coloco el script, Sera que me pueden ayudar?

  6. A mi me pasa lo mismo que a pablo, cuando pinchas en un submenú, WordPress recarga toda la página y el menú se cierra ¿cómo se podría hacer para que esto no ocurra? ¿podría poner un ejemplo, para que, los que somos nuevos en esto de la programación, lo entendamos?

    Aún así muy bueno el menú, muy útil y muy elegante. Muchas gracias.

    Saludos

  7. Me parece un gran aporte, muchas gracias. Mi pregunta va en línea con el primer comentario. La actualización del menú que esté implantado en muchas páginas. Si no sabemos php, existe alguna manera de indicar el contenido el menú en un fichero externo? De esta forma, actualizando ese fichero se actualizaría todo el contenido en las distintas páginas. Muchas gracias de nuevo.

    1. Gracias Valdehornos,
      No se me ocurre ninguna manera de incorporar un archivo externo de Html dentro de otro si usar PHP, por ejemplo. Lo malo de realizar una web unicamente en Html es precisamente eso, la repetición de las tareas de manera continuada.

      1. Muchas gracias Juan. ¿Conoces algún sitio o post donde expliquen como cargar el contenido de un fichero externo utilizando PHP? ¿Sería muy complicado? A mi no me importaría incorporar php si me permite actualizar contenidos con más facilidad.
        Gracias de nuevo

        1. Puedes hacerlo con “include”. Imagínate que tienes la cabecera de la web (todo lo que se repita de la parte de arriba de tu web) en un fichero externo para incorporarlo en cada página., y que ese archivo se llama header.inc.php. Lo llamarías haciendo:

          Puedes ver más información en la documentación de PHP.

  8. Hola Juan que tal, primero debo agradecer por compartir tus conocimientos, pues me han sido de mucha ayuda, ahora voy a mi pregunta, estoy haciendo un menú vertical desplegable, pero quiero agregarle los estrilos y no logro hacerlo, se que estoy haciendo algo mal pero no se que es? Este es el código

    Este es el script de jQuery:

    Ahora bien mi problema es que en el en el ces. no se como agregarle los estilos pues quiero que el menú principal tenga un estilo y el secundario que se despliega tenga otro, como hago esto?

    1. Hola Alvaro,
      ¿Falta algo en el código html? Es que es sólo una sucesión de enlaces, te faltaría poner las listas y las clases. Si estuviéramos hablando del ejemplo del artículo con CSS le darías estilo haciendo ;

      No sé si era eso lo que decías.

  9. Hola Juan, ¿qué tal?
    Tengo una consulta que agredeceré si puede contestar.
    Sé que en href están algunos enlances con # para que no devuelvan nada. Lo que no entiendo es como hacer para, una vez reemplazados los # por el destino que elijo, muestre este en un div que llamo contenido.
    ¡Muchas gracias!

      1. Juan, he respondido y como parecía no funcionar apreté publicar varias veces… espero no aparezcan mis respuestas multiplicadas.
        Finalmente resolví mi inquietud.
        En la parte de scripts agregué:

        A los botones le faltaba una id para asociarla al scrpit, la cual le di con el nombre btn1.
        No sé si es la forma más práctica, pero con mi conocimiento básico así lo hice funcionar.
        1Muchas gracias!

  10. Hola Juan, gracias por tus aportes, estoy empezando a programar con jquery y me ha servido de gran ayuda este ejemplo.

    Estoy implementando un menú desplegable con las mismas características pero necesito que al darle a un elemento del menú, si anteriormente se había abierto otro elemento del menú con su correspondiente submenú, éste último se cierre, no sé si me explico. En el ejemplo, si hacemos click en “venta” y después en “oficinas”, necesito que “venta” se cierre. ¿Qué código haría falta para implementar esto?

    Gracias de antemano.

    Un saludo.

    1. Hola Nuxeret, gracias por tus comentarios. En este artículo al hacer click sobre una opción las otras se cierran. ¿No es eso lo que quieres que suceda?

      1. Hola y gracias de nuevo. Si me sucede lo que comentamos, pero sólo si hago click en una opción con submenú. Si hago click en una opción que no tiene submenú no se me cierra la opción con submenú que habia clickeado antes.

        Saludos

        1. Ah ya te entiendo. Es que en teoría al hacer click sobre una opción que no es desplegable sería un enlace a otra página. Si quieres que sea como una de las opciones desplegables, que no se cambiara de página, tendrías que tratarlas igual que a las otras (con la misma clase etc)

          1. Hola Juan,

            mil gracias de nuevo, lo he conseguido añadiendo la clase desplegable a las opciones que no tienen submenús 🙂

            Se me ocurre otra pregunta que hacerte en base al menú que estoy implementando (espero no resultar impertinente), verás, en el ejemplo el menú se mantiene fijo respecto al primer elemento de la lista y se desplega hacia abajo; yo necesito hacer justo lo contrario, es decir, que el elemento fijo sea el último de la lista y se despliegue hacia arriba. ¿Esto es posible? y en tal caso, ¿cómo podría conseguirlo?

            Gracias de nuevo por tu atención.

            Un saludo

  11. ¡Hola Juan!

    Me interesaría mucho que explicaras un poco más a fondo como podemos tener varios niveles. Lo he estado intentando y cuando intento abrir un subsubmenú, se cierran los desplegables, o se abren todos, etc. Sería de gran ayuda, te lo agradecería, pero tengo la sensación que las preguntas de varios niveles las has “evitado”.

    Por cierto, muy bueno el artículo. ¡Muchas gracias!

  12. Hola Juan:
    gracias por tu aporte!!!!
    buscando en los post encontre esta pregunta pero no la respuesta…
    yo quisiera que cuando abro una opcion del menu. (desplegable) y selecciono una opcion de submenu.. el submenu me quede abierto dentro de esa opcion de deplegable..eje
    Frambuesas
    Variedad 1
    Variedad 2

    Frutillas
    Variedad 1
    Variedad 2

    si selecciono la variedad1 de frambuesas..quisiera que el menu me siga mostrando las variedades de frambuesas ? .. espero se entienda mi consulta.
    gracias… Carolina

  13. Hola, muy bueno tu articulo, y mas bien aprovecho para consultarte algo, como se puede modificar el script para que al hacer clic despliegue el submenu y al quitar el mouse del menu, este se contraiga.

    gracias de antemano por cualquier sugerencia

  14. Hola Juan me sumo a una pregunta que he visto en los comentarios. El problema es que al hacer clic en uno de los submenus o en otros vínculos de la misma página este se pliega. Mi intención es que siga intacto y sólo vuelva a plegarse cuando le clicee de nuevo en el mismo vínculo.

    Te mando la dirección para que veas ejemplo, haber si puedes echarme una mano:
    http://www.albertoliva.es/prueba/index.html

    Saludos y muchas gracias.

    1. Hola Alberto,

      Para ello tendrás que añadir una clase a lo que quieras que permanezca abierto, por ejemplo la clase “selected” en este código:

      que lo puedes ver en acción en esta web http://www.arteyarquitectura.es/gestion-inmobiliaria/

  15. Hola, me ha gustado mucho tu artículo, creo que es muy bueno por lo sencillo que es y el poco código que usas. Lo he probado y va muy bien pero me falta algo: ¿cómo podría hacer para que el menú tuviera varios niveles? Es decir, un submenú dentro de otro submenú, no se si me explico.

    Saludos.

    1. Gracias Fran,

      Es algo que ya me han pedido varios lectores. Habría que complicar el código, a ver si un día me pongo con ello y lo hago.

  16. Hola Juan,

    Tengo este codigo que me permite desplegar un menu (horizontal) empleando jquery, cuando se activa un menu los otros se contraen, ahora lo que quiero hacer es casi lo mismo que comenta Alberto, que cuando se pase a otra pagina el menu desde donde se hizo click permanezca colapsado, no conozco bien jquery y apreciaria mucho una ayudita…

  17. Tengo el problema que Nuxeret hace en su último comentario, en el menú que estoy implementando necesito que la lista se despliegue hacia arriba . He estado haciendo varias pruebas, pero no lo consigo ¿Esto es posible?

    Muchisimas gracias

  18. Hola juan.

    El código me funciona a la perfección, sin embargo, me gustaría rizar el rizo.
    Yo tengo un menú con apartados sin submenús (que no desplegará ninguna opción y que funcionan como un vínculo directo) y otros apartados con sumenús desplegables. Al hacer click sobre un apartado con submenú, se me cierra si tengo otro abierto tal i como pasa en el ejemplo que pusiste.
    Ahora mi pregunta. ¿Si con un submenú desplegado, quisiera que al pulsar sobre un “apartado superior” que no tenga submenú, me cerrara qualquier submenú que tenga abierto, como debo hacerlo?
    Gracias!

  19. Hola Juan, te queria preguntar si ya hay algo hecho de ejemplo para determinar que item del menu me selecciono para asi yo mostrar los datos en la pantalla de acuerdo a lo seleccionado. Gracias

  20. Juan, muchas gracias por el artículo. Hacía tiempo que iba buscando un efecto acordeón sencillo, sin imágenes de fondo, bordes, colores y demás estilos y filigranas que complican el código fuente para poder aplicar el ejemplo.

    Un saludo!!!!

  21. Hola amigo te agradesco de corazon estoy iniciando en este mundo de wordpress y la verdad me agrado bastante.

    Anteriormente estuve trabajando con blogger, veo que wordpress tiene mas cosas

  22. Hola amigo otra vez por aqui te queria hacer una consulta.

    Que puedo hacer para que se abra por ejemple al hacer clik en ventas me lleve atodas las categorias que estan en ventas y a la vez tambien me abra el desplegable.

    Espero que me ayudes gracias

  23. Hola Juan, muchísimas gracias por el tutorial, es buenísimo…

    a mí me funciona todo bien, menos en explorer. Al entrar a la página aparece todo el menú plegado, pero en cuanto pincho en uno de los enlaces superiores se despliega todo, no sólo el bloque de submenús que he pinchado y, claro, queda una lista enorme. Imagino que es un problema de las nuevas versiones de explorer, pero… tiene alguna solución? 🙁

    Gracias por todo?

  24. tengo un problema con el codigo query
    yo hago un archivo javascript para poner ahi todas las funciones. y lo linkeo con el archivo html donde estoy trabajando, asi no me queda tanto codigo en el archivo html
    la cosa es que cuando lop ongo en un archivo javascrip separado me tira que la linea

    tiene un error de sintaxis, pero la copie directo desde esta pagina :S

  25. Hola buenas,
    en primer lugar muchas gracias por compartir tus conocimientos, el menú está genial. Me gustaría preguntarte que habría que editar en el código del java en la función clikc para que cuando se pulse un enlace se cierre un submenú desplegado. No se si me he explicado bien. Es lo único que le falta al menú para estar perfecto.
    Si pulsas en venta se abre vivienda y aparcamientos, pero y si algún intrépido usuario pulsa en Oficinas me gustaría que el menú de venta se replegase.
    Un saludo y enhorabuena por tu web hay realmente contenidos de calidad.

  26. Antes de nada,muchas gracias Juan (si me permites tutearte) por este fantástico artículo.Me ha sido de gran utilidad.
    Pero me ha surgido un pequeño problema.El menú me funciona perfectamente en IExplorer pero no así en Chrome no consigo saber por que pasa esto.¿Tienes alguna idea de que puede pasar?.Muchas gracias por tu ayuda e interés

  27. Hola,Juan.Acabo de comentar un trozo de código en mi css y sin querer he dejado esta sentencia sin comentar “background-color:#FFF;” y de buenas a primeras me funciona sin problemas tanto en Chrome como en IExplorer.No lo entiendo.He revisado todo mi archivo css y esta todo correctamente abierto y cerrado.

  28. Hola buenas Juan,
    tengo una pregunta, me gustaría que en el menú cuando se pulse sobre un enlace de la clase “desplegable” a parte de abrir el submenú al hacer .click que te lleve a una página.
    Es decir si pulsamos sobre “venta” que a parte de abrir el submenú (viviendas y aparcamientos) también abra la página correspondiente a viviendas.
    Un saludo y muchas gracias de antemano.

    1. Hola Ricardo!

      Perdona, no siempre puedo responder las preguntas, porque estoy normalmente con mucho trabajo. Si al hacer click cambias de página puedes hacer que también se desplieguen, pero para qué lo querrías? Al cambiar de página no ibas ni a ver que se han desplegado, no? A no ser que hagas que se habra en otra ventana.

  29. Hola Juan,
    disculpa, yo también siempre estoy a tope de trabajo, y tienes razón no puede ser así como lo planteo.
    Y una preguntita se podría hacer que al pasar el ratón se despliegue el submenú? sin tener que hacer el click

    Un saludo y muchas gracias.

  30. hola muy buenas tengo un pequeño problema con el menu sale desplegado las categorias y subcategorias y no funciona, solo pasa en internet explorer como lo podria arreglar?

  31. Saludos Juan

    Primero agradecer pudieras responder a esta,  quiza podrias ayudarme con el codigo del script , desearia que al hacer click en ventas (que es la clase desplegable me permita hacer un href  ha otra pagina o a otro sector de la misma pagina ) , pues bien cuando hago click en los li de la clase desplegable no hace la referencia que le pongo por ejemplo :

    hay algo que deba considerar ? agradecere mucho tu ayuda.

    Gracias por todos los aportes…

    Saludos

     

  32. Gracias por tu pronta respuesta ; abajo muestro el codigo que lo he separado en un archivo .php (lo llamo menuderecha.php) el cual lo llamo desde otro archivo llamado index.php con

      ahora bien cuando hago click en  en la primera opcion TRADITIONAL TOURS ,

    no funciona , que es la que corresponderia a la class=desplegable, y  me muestre la pagina index.php con un parametro llamado Id cuyo valor le asigno desde el mismo codigo abajo escrito; Lo cierto es que solo funciona con las  subopciones o subnavegadores (viviendas id=2, aparcamientos id_3)

    para resumir las lineas arriba en negrita  al hacer click ademas de desplegar las sub opciones no ejecutan su href.

    Ojala no sea mucho rollo , pero de igual forma gracias por tu pronta respuesta y felicitaciones por esta magnifica web

    saludos

  33. Estimado Juan, mil disculpas por insistir , pero no encuentro la forma de hacer que funcione el href que le pongo a una lista (<li>) del navegador que saque de tu ejemplo ,  ejemplo:

    En la linea del elemento li que esta como class desplegable no me muestra ninguna accion de referencia , lo que busco es que la clase “desplegable” ademas de desplegar las opciones de subnavegador me permita ejecutar  su href que en el caso de arriba seria : index.php?Id=3.

    Ojala haya sido mas claro esta vez, desde ya agradezco infinitamente  tu ayuda

    gracias por tu tiempo, aportes y ayuda

    saludos

     

    1. Hola Fernando,

      En el código Javascript se ha anulado la acción normal del enlace en la línea del e.preventDefault();. De todas formas, si pudiera enlazar normalmente no necesitarías que se desplegara, no?

  34. hola te agradezco mucho el tutorial estoy iniciandome en el diseño web y quiero aprender sobre jquery mi pregunta es que quiero hacer que ademas de los dos primeros botones que se despliegan quiero colocar mas en los otros es decir, quiero colocar mas botones, pero en html duplico los ul y li y los inserto en los otros botones pero no funciona quisiera saber que otra cosa debo modificar espero me respondas

  35. Buenas tardes SR., Ante todo soy novota en css todavia, lo que deseo es Los menus y subMenus me funcionan excelente, pero desearia el mismo efecto para los SubMenus de los SubMenus. osea que se vea minimizado y todo y al dar click tenga el mismo efecto, muchas gracias desde ya he estado intentando pero sin exito 🙁

  36. buenos dias, implemente un filtor en el menu despelgable,; mi pregunta es como mantener desplegado el menu al seleccionar un submenu (porque al hacer click en un determinado submenu, se cierra el menu desplegable), gracias por su ayuda de antemano.

Deja un comentario

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

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.