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