Contenido

Domina los acordeones con MooTools

20 may

+ 2

Llamamos acordeón a aquellos elementos dinámicos de nuestras páginas web que muestran un elemento al pasar con el ratón (o hacer click sobre él) ocultando los demás elementos que lo componen. Esta técnica muy cómoda para mostrar grandes cantidades de información en poco espacio suele darnos algún dolor de cabeza para cuadrar toda la información.

byslidermenu
(Ver Imagen)

Con BySlideMenu, nunca más tendremos problemas. Se trata de un plugin para MooTools que nos permite hacer una gran variedad de acordeones con muy pocas líneas de código.

HTML

El código HTMl que usaremos para generar nuestro acordeón se basará en una lista de elementos:

<ul id="pinclickmenu">
    <li><img src="creditcards.jpg" /></li>
    <li><img src="games.jpg" /></li>
    <li><img src="computer.jpg" /></li>
    <li><img src="eiffeltower.jpg" /></li>
    <li><img src="electronic.jpg" /></li>
</ul>

Cada <li /> será uno de los elementos que compondrán el Acordeón.

Javascript

var pinclickmenu = new BySlideMenu('pinclickmenu', {pinMode: 'click'});

Como podemos ver menos líneas es imposible :D

Demos y Descarga

Podeis ver más demos y descargar el plugin desde la página del proyecto.

  • Absolutamente magnífico: excelente documentación, excelente estudio de todos los posibles diseños de acordeones y excelente funcionamiento. Desde este momento para mí BySlideMenu constituye la referencia canónica respecto a la implementación de acordeones.

    Además es un plugin “vacuno:D

  • JAJAJA muy bueno! Es tan simple de usar que hasta un novato como yo lo a puesto a andar!

    Eso si… en IE 7 no anda, no probé el IE8 pero debe ser más de lo mismo…. :(

    En Opera, Safari, Firefox y Chrome anda muy bien!.

    Gracias por el dato!

    Saludos.

Comentar

#

Me reservo el derecho de eliminar y/o modificar los comentarios que contengan lenguaje inapropiado, spam u otras conductas no apropiadas en una comunidad civilizada. Si tu comentario no aparece, puede ser que akismet lo haya capturado, cada día lo reviso y lo coloco en su lugar. Siento las molestias.