Cerrar
Image Alt

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.

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.

Comentarios

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

    10 junio, 2010
    contestar
  • 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!

    25 junio, 2010
    contestar
  • Hola, no entendí muy bien. Dónde debo pegar cada código? Estoy al tanto de tu respuesta.

    1 agosto, 2010
    contestar
  • Xabi

    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!

    6 septiembre, 2010
    contestar
  • Cesar

    Hola, muy bueno el menu, estuve aplicandolo y funciona muy bien. Mi pregunta es: ¿que diferencia hay si deberia ser un menu horizontal? Gracias, saludos

    13 septiembre, 2010
    contestar
  • AlvaroRivero

    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

    25 septiembre, 2010
    contestar
  • Sofia

    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?

    27 septiembre, 2010
    contestar
  • Fco

    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 noviembre, 2010
    contestar
  • Valdehornos

    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.

    14 enero, 2011
    contestar
      • Valdehornos

        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

        17 enero, 2011
        contestar
          • Valdehornos

            Así lo voy a intentar.

            Muchas gracias de nuevo.
            Saludos

            19 enero, 2011
  • Alvaro

    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?

    24 enero, 2011
    contestar
  • Alvaro

    Hola Juan, me funciono perfectamente, nuevamente gracias por tu ayuda

    25 enero, 2011
    contestar
  • Andrés

    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!

    21 febrero, 2011
    contestar
      • Andrés

        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!

        22 febrero, 2011
        contestar
  • Nuxeret

    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.

    23 febrero, 2011
    contestar
      • Nuxeret

        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

        23 febrero, 2011
        contestar
          • Nuxeret

            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

            25 febrero, 2011
  • paco

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

    25 febrero, 2011
    contestar
  • Carolina

    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

    16 marzo, 2011
    contestar
  • Arturo

    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

    25 marzo, 2011
    contestar
  • 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.

    26 marzo, 2011
    contestar
      • Alberto

        Muchisimas gracias Juan

        28 marzo, 2011
        contestar
  • Fran

    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.

    11 abril, 2011
    contestar
  • Arturo

    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…

    20 abril, 2011
    contestar
  • Mchefer

    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

    5 mayo, 2011
    contestar
  • Rubén

    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!

    6 julio, 2011
    contestar
  • Christian

    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

    3 noviembre, 2011
    contestar
  • Miki

    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 noviembre, 2011
    contestar
  • raul

    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 noviembre, 2011
    contestar
  • 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

    30 noviembre, 2011
    contestar
  • Nacho

    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?

    12 marzo, 2012
    contestar
  • ivana

    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

    29 abril, 2012
    contestar
  • 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.

    11 junio, 2012
    contestar
  • Hola buenas,
    pido disculpas pues leyendo los comentarios, Que son muchos!!! he visto que mi pregunta está solucionada.
    Gracias.

    11 junio, 2012
    contestar
  • Raul

    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

    5 julio, 2012
    contestar
  • Raul

    Hola,Juan.El ejemplo que pones en la explicacion de articulo me funciona sin problemas en Chrome

    5 julio, 2012
    contestar
  • Raul

    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.

    5 julio, 2012
    contestar
  • 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.

    6 julio, 2012
    contestar
  • Hola buena,
    se entiende mi pregunta????
    o es que puede que este respondida, me he leído todos los comentarios y no lo he visto.

    Un saludo.

    10 julio, 2012
    contestar
  • 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.

    10 julio, 2012
    contestar
  • juan pedro

    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?

    14 agosto, 2012
    contestar
  • adan

    Yo quisiera saber como para pasar de menu a submenú y que se mantenga el submenu visible 🙂

    21 agosto, 2012
    contestar
  • Fernando

    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

     

    23 abril, 2013
    contestar
  • Fernando

    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

    23 abril, 2013
    contestar
  • Fernando

    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

     

    25 abril, 2013
    contestar
  • Adrian Perez

    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

    10 junio, 2013
    contestar
  • Gianz Rivera

    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 🙁

    16 abril, 2015
    contestar
  • José Martínez Carrasco - Panamá

    Muchas gracias. Estoy empezando en esto del JQuery y esto era lo que necesitaba. Gracias

    2 febrero, 2016
    contestar
  • Wilson

    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.

    26 septiembre, 2016
    contestar

Escribe un comentario