Videotutorial: Cómo hacer un plugin jQuery – Menú acordeón multinivel

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)

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>

Compartir:

67 comentarios para “Videotutorial: Cómo hacer un plugin jQuery – Menú acordeón multinivel”

  1. Marthalu dice:

    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!

  2. reynaldo dice:

    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 ?????

  3. David dice:

    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?

  4. ambar dice:

    hola, para poder hacerlo en cuatro niveles que es lo que tengo que cambiar especificamente ??

  5. juanma dice:

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

  6. SK dice:

    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?

  7. Oscar dice:

    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.

  8. Oscar dice:

    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

  9. jefferoson arcos dice:

    Muchas gracias por la ayuda… esta exelente!

  10. IKIRO dice:

    Muchas gracias!!!Muy buen aporte!!

  11. IKIRO dice:

    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

  12. luxy dice:

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

  13. carlos dice:

    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.

  14. XIM dice:

    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.

  15. Adriana dice:

    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.

  16. Rogério dice:

    Belo trabalho David, a sua explicação foi muito clara e simples! Os resultados são perfeitos.

  17. Fernando Actis dice:

    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.

Deja un comentario

Introduce tu información personal en el formulario, regístrate o identifícate usando twitter con el siguiente botón.

Time limit is exhausted. Please reload the CAPTCHA.

RSS iTunes podcast Twitter

Categorías

Enlaces

Archivos