Respondiendo a la multitud de peticiones en los comentarios del artículo sobre cómo crear un menú en acordeón, aquí os muestro cómo hacer el mismo menú pero con soporte para varios niveles.
Este menú está basado en el anterior, y como apenas necesitaba un pequeño cambio en el javascript para hacerlo multinivel, he aprovechado para convertirlo en un plugin y enseñaros en un screencast cómo hacer vuestros propios plugins en jQuery.
Ver Demo menú acordeón multinivel
Ver screencast (duración: 8:17)
- Descargar videotutorial en alta calidad – MOV (25 MB)
- Descargar videotutorial optimizado para iPod/iPhone – M4V (13 MB)
No olvidéis echarle un vistazo al resto de videos en la página de videotutoriales, o suscribiros al podcast de iTunes.
Cómo usarlo
Para ver el HTML y CSS no tenéis mas que ver el código fuente del ejemplo de arriba, es bastante similar al del artículo anterior. En el html se añade un nivel más de anidamiento de listas, y en el CSS se le añade la regla #menu ul li li{padding-left: 10px;} para que los niveles inferiores tengan padding (esto podéis modificarlo como queráis).
Para cargar el javascript, podéis copiar el código en la cabecera tal como está en el ejemplo, o bien descargaros el archivo JS con el plugin e insertarlo de esta manera:
<script src="jquery.accordion.js" type="text/javascript" charset="utf-8"></script> |
Después sólo os queda llamar al plugin:
<script type="text/javascript" charset="utf-8"> $(function(){ $('#menu').accordion(); }); </script> |
hola David, soy diseñadora y la verdad me cuesta un poco de trabajo editar codigo, pero con tu explicacion y el ejemplo que das me facilistaste hoy la vida!! Muchas gracias y Bendiciones!
buen tutorial, pero mira hay maneja de colocar informacion en cada acordion y que esten dos abiertos a la vez y con un scroll dentro de cada uno ?????
Hola Tocayo!
He probado el menú y es excelente, sólo hay un detalle, en internet explorer 8 se visualiza una separación entre los elementos del menú desplegable.
¿tendrás alguna solución para esto?
hola, para poder hacerlo en cuatro niveles que es lo que tengo que cambiar especificamente ??
Buenas David!
Muchisimas gracias por este tutorial! Me ha venido muy bien!!
Tengo una duda, haber si puedes echarme una mano porfavor…
La cuestión es que me gustaria marcar, de alguna forma (ej que se quede en rojo), el «boton» que he pulsado, para asi saber en que parte de la botonera, me encuentro…
Si puedes echarme una mano, muy agradecido! y sino, pues tambien! Me ha sacado de un buen ahujero. Muchisimas Gracias!!
Hola. Tu ejemplo es genial. gracias por compartirlo. Una consulta, cundo pruebo el codigo con contenido estatico todo fucniona bien, pero cuando cargo la informacion desde un xml ya no funciona el despliegue, pierde la funcionalidad del acordeon. Tines alguna sugerencia?
David, buenas tardes,
He probado tu diseño y esta excelente solo una pregunta, es posible que puedan convivir 2 menus en una misma pagina?
Te pregunto porque los he incluido y solo el primero es el que tiene el efecto el segundo es como si no tomara parte del código.
De antemano muchas gracias.
Un saludos, Oscar.
David, ya encontre solución, no se si sea la mas correcta, pero te platico:
1. Copie el código del JAVASCRIPT 2 veces solo que en la sección donde hace llamado al («menu»).accordion al segundo le puse («menu2»).accordion
2. Al lo copie de igual modo y los nombre como #MENU2.
Gracias por tu excelente blog, un saludo.
Oscar
Muchas gracias por la ayuda… esta exelente!
Muchas gracias!!!Muy buen aporte!!
Se me olvidaba!!He hecho una pequeña correción, porque se me cargaba totalmente expandido. Así que lo he dejado asi:
jQuery(‘nav ul li> ul’).hide();
jQuery(‘nav’).accordion();
Maqueto con html5 de ahí el selector ‘nav’, pero funcionaría también con #menu
Un saludo
Muy buen aporte eee juju yo e estado investigando en varios lugares y creeme que el tuyo fue el mejor que e entendido 🙂 muxas gracias !!!!!
David, como hago para dejar el ultimo elemento de la lista seleccionado.
Navego por el menu y si en algun momento me paro en algun submenu de la lista y clickeo quiero que ese ultimo quede resaltado. Podrias ayudarme?
Gracias.
hola David
probe tu código pero no me muestra el submenú, estoy utilizando Windows 8, no se si se deba a eso o me esta faltanto algo
y otra cosa estoy utilizando marcos pero no lo puedo direccionar a otro
ojala puedas ayudarme
gracias.
Hola!
En primera muy bueno tu tutorial pero tengo dos problema. El primero, es que cuando hago click en el submenú2 que es el que quiero desplegar primero se vuelve a cerrar y luego cuando lo vuelvo abrir aparece ya desplegado y el segundo, es que todos los gatgets que tengo se sombrean.
Belo trabalho David, a sua explicação foi muito clara e simples! Os resultados são perfeitos.
David, buenas tardes. Fantástico el artículo.
He logrado que el jquery para un menu multinivel de similares características, funcione y se vea bien en Chrome, Firefox, Opera y Safari. Pero no en las versiones 8 y 9 de IE.
Me podrás comentar o ayudar al respecto.
Gracias.
discover this
Videotutorial: Cómo hacer un plugin jQuery – Menú acordeón multinivel « David Rojas – Diseño y desarrollo web
https://fulltimefieldtrip.com/travel-teaches-10-powerful-lessons/
Videotutorial: Cómo hacer un plugin jQuery – Menú acordeón multinivel « David Rojas – Diseño y desarrollo web
blog.uniteldirect.co.uk writes
Videotutorial: Cómo hacer un plugin jQuery – Menú acordeón multinivel « David Rojas – Diseño y desarrollo web
formatns.kz
Videotutorial: Cómo hacer un plugin jQuery – Menú acordeón multinivel « David Rojas – Diseño y desarrollo web
elisabethquiroz47.wikidot.com
Videotutorial: Cómo hacer un plugin jQuery – Menú acordeón multinivel « David Rojas – Diseño y desarrollo web
ddylidia9713902815.webgarden.cz
Videotutorial: Cómo hacer un plugin jQuery – Menú acordeón multinivel « David Rojas – Diseño y desarrollo web
sellfast.in
Videotutorial: Cómo hacer un plugin jQuery – Menú acordeón multinivel « David Rojas – Diseño y desarrollo web
Nhs worker page
Videotutorial: Cómo hacer un plugin jQuery – Menú acordeón multinivel « David Rojas – Diseño y desarrollo web
https://alexceli.org/blog/2006/07/04/el-uso-de-celulares-en-el-bolsillo-de-la-camisa-trae-serias-consecuencias-108.php
Videotutorial: Cómo hacer un plugin jQuery – Menú acordeón multinivel « David Rojas – Diseño y desarrollo web
fulltimefieldtrip.com
Videotutorial: Cómo hacer un plugin jQuery – Menú acordeón multinivel « David Rojas – Diseño y desarrollo web
from alissaisaachsen.skyrock.com
Videotutorial: Cómo hacer un plugin jQuery – Menú acordeón multinivel « David Rojas – Diseño y desarrollo web
parkour.se
Videotutorial: Cómo hacer un plugin jQuery – Menú acordeón multinivel « David Rojas – Diseño y desarrollo web
stay with me
Videotutorial: Cómo hacer un plugin jQuery – Menú acordeón multinivel « David Rojas – Diseño y desarrollo web
greatlivings who installs garbage disposals
Videotutorial: Cómo hacer un plugin jQuery – Menú acordeón multinivel « David Rojas – Diseño y desarrollo web
best buy kitchen sinks great livings
Videotutorial: Cómo hacer un plugin jQuery – Menú acordeón multinivel « David Rojas – Diseño y desarrollo web
custom paper writing service
Videotutorial: Cómo hacer un plugin jQuery – Menú acordeón multinivel « David Rojas – Diseño y desarrollo web
phone data
blog topic
best physiotherapy near richmond
blog topic