Más de alguna vez me han preguntado cómo funciona el menu superior que comanda este sitio. Ese movimiento de la etiqueta que de tan fluído parece ser Flash. Bueno, para eso se utiliza una librería JavaScript gratuita llamada script.aculo.us, la que a través de un simple comando y fácil configuración permite ese y otros muchos interesantes efectos. Existen algunas otras librerías, también gratis que hacen lo mismo. Tal es el caso de mootools, jquery o simpleJs. Es desición de cada uno cuál utilizar.

Bien, para el ejemplo específico del efecto del menú de este sitio, se utilizó Effect.toggle(), el que permite con un sólo onclick() (en un , , etc) mostrar y esconder el div con el id que necesitamos. En el fondo se trata de eso, tenemos un div, le damos un id específico y único, el que a través del onclick le decimos que muestre ese div si está escondido, o que lo esconda si está visible. Para que el div esté escondido desde un inicio, le damos un display: none; en el mismo HTML o en una hoja de estilos externa, como prefieras. Como la mayoría de las veces, muestro un ejemplo visual y código utilizado explicado. Primero, el código HTML:

Mostrar y Esconder Texto

Fijarse que al onclick se le agregó el id cajatexto, al igual que el div que queremos que se vea el efecto aplicado.

Ver ejemplo

Debemos agregar 2 elementos JavaScript a la página que queremos que ocurra el efecto: prototype.js y scriptaculous.js (en ese mismo orden).


Como dije, script.aculo.us ofrece muchas más funcionalidades, además de efectos. Chequeen su sitio para más información.