Programatik

May 23, 2009

Menú en acordeón usando Mootools y listas ul y ol anidadas

Filed under: menu, accordion, mootools, JavaScript — Rafa @ 5:19 pm

En la Red podemos encontrar bastantes ejemplos de menús de tipo acordeón, muchos de ellos usando jQuery o Mootools.

No obstante, muchos de ellos presentan elementos h3 con elementos div de manera que los h3 reaccionan al click mostrando u ocultando los div.

Si lo que queremos es utilizar una jerarquía de opciones en una lista anidada de elementos ol o ul, podemos hacerlo como se muestra en el lab.

Lo único a tener en cuenta es esta línea de código:

new Accordion($$(A), $$(B));

donde A es el conjunto de elementos disparadores (en nuestro caso, los enlaces .main_section y B es el conjunto de elementos a mostrar y ocultar (en nuestro caso, los bloques .submenu).

El código, como siempre, para descargar aquí.

Enlaces

  • http://jQuery.com
  • http://mootools.net
  • http://www.rafachacon.com/lab/mootools-accordion-menu/test.html
  • http://www.rafachacon.com/lab/mootools-accordion-menu/mootools-accordion-menu.zip
  • Powered by WordPress