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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <ul class="navegador">
<li><a href="#" class="desplegable" title="Venta">Venta</a>
<ul class="subnavegador">
<li><a href="#" title="Viviendas">Viviendas</a></li>
<li><a href="#" title="Aparcamientos">Aparcamientos</a></li>
</ul>
</li>
<li><a class="desplegable" href="#" title="Alquiler">Alquiler</a>
<ul class="subnavegador">
<li><a href="#" title="Viviendas">Viviendas</a></li>
</ul>
</li>
<li><a href="#" title="Oficinas">Oficinas</a></li>
<li><a href="#" title="Ofertas">Ofertas</a></li>
<li><a href="#" title="Oficina de Ventas">Oficina de Ventas</a></li>
</ul> |
Y el código jQuery que lo hace posible:
1 2 3 4 5 6 7 8 9 10 11 | <script type="text/javascript"> $(document).ready(function(){ // Script del Navegador $("ul.subnavegador").not('.selected').hide(); $("a.desplegable").click(function(e){ var desplegable = $(this).parent().find("ul.subnavegador"); $('.desplegable').parent().find("ul.subnavegador").not(desplegable).slideUp('slow'); desplegable.slideToggle('slow'); e.preventDefault(); }) }); </script> |
Si tenéis alguna pregunta no dudéis en preguntar.
Sigue a Juan en Twitter, en Google+, o suscríbete al RSS Feed de Emenia para estar al día de nuestros artículos.
Artículos relacionados
43 Comentarios a Creando un menú vertical desplegable con jQuery (2)
Deja un comentario
Últimos artículos
Suscribirse a las entradas
Suscribirse a nuestro boletín
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!
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ú.
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!
Hola, no entendí muy bien. Dónde debo pegar cada código? Estoy al tanto de tu respuesta.
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!
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
Gracias Cesar,
Aplicando CSS a los estilos de la lista puedes orientar horizontalmente el menú y los submenús.
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
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?
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
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.
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.
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
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.
Así lo voy a intentar.
Muchas gracias de nuevo.
Saludos
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?
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.
Hola Juan, me funciono perfectamente, nuevamente gracias por tu ayuda
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!
Hola Andrés, ¿Qué has puesto en vez de #? ¿El enlace es a otra página o a lo que quieres es mostrar un contenido hasta ahora oculto de dentro de la página? En el segundo caso quizás te sirva este artículo: Crear un menú con pestañas con jQuery
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!
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.
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?
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
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)
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
¡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!
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
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
Hola Arturo,
Cambia el evento (ya no es click sino mouseover, o mouseenter, mouseleave). Mira estos enlaces:
http://api.jquery.com/mouseover/
http://api.jquery.com/mouseenter/
http://api.jquery.com/mouseleave/
También puedes usar hover:
http://api.jquery.com/hover/
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.
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:
$(document).ready(function(){ // Script del Navegador $("ul.subnavegador").not('.selected').hide(); $("a.desplegable").css('background', 'url(/images/flecha_down.gif) no-repeat top right'); $("a.desplegable").click(function(e){ var desplegable = $(this).parent().find("ul.subnavegador"); $('.desplegable').parent().find("ul.subnavegador").not(desplegable).slideUp('slow'); desplegable.slideToggle('slow'); e.preventDefault(); }) });que lo puedes ver en acción en esta web http://www.arteyarquitectura.es/gestion-inmobiliaria/
Muchisimas gracias Juan
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.
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.
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…
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
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!
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
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!!!!
Gracias Miki
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
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