Agregando movimiento vía JavaScript

13/feb/2007 14

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 <a>, <span>, 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:

<a onclick="new Effect.toggle($(‘cajatexto’),’blind’)">Mostrar y Esconder Texto</a>
<div id="cajatexto" style="display: none;">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris eget ante. Integer sollicitudin urna eget est. Phasellus pharetra rutrum erat. Phasellus non augue et sapien nonummy……………..</p>
</div>

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).

<script src="include/prototype.js" type="text/javascript"></script>
<script src="include/scriptaculous.js" type="text/javascript"></script>

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

Comentarios

  1. Ardilla Roja [#]

    Q pasa si alguien entra con JS deshabilitado …?

  2. Ardilla Roja [#]

    Q pasa cuando no ha JavaScript habilitado?

  3. CSSLab Admin [#]

    no funciona. el CSS deja escondido el DIV y no hay manera de desplegarlo.

  4. Anonimo [#]

    ¿Qué pasa si les rompo la cara a esos preguntones, incrédulos de las maravillas de las librerías de Javascript?

  5. Covi [#]

    PERDÓN: Último intento:

    Mola el diseño del sitio 😉 pero un apunte, lo mismo ando algo perdido pero la función del efecto (y al menos la que suelo usar yo) es Element.toggle() NO Effect. Y un return false(); tampoco vendría mal unido a un destino “real” para el vínculo…

    Lo dicho,… aps, emm, no ví los comentarios jiji:
    No os funciona por lo que comento, probadlo, yo dejaría el código algo así:
    [a href=”/destino.documento” onclick=”Element.toggle(‘CajaTexto’);return false;” title=”Mostrar y Esconder Texto”]Mostrar y Esconder Texto[/a]

    Para los quisquillosos de siempre con JavaScript, que hay que recordar que es un estándar del W3C junto con DOM, etc… o sea, más recomendado que Flash y otras “yerbas”, se usa lo de “toda la vida”.
    [noscript]Contenido que se verá en un navegador sin JS[/noscript]
    Y si os poneis estrictos:
    [script type=”text/javascript”]

    [/script]
    😉 un saludo, gran blog.

  6. pablo vivanco [#]

    Hola gente de CSSLAB , luego de leer el uso de JS en este ejemplo , mi pregunta es la siguiente , ¿ Cómo puedo ocupar este mismo efecto , pero para HACER MENU HORIZONTAL DE VARIOS LINCK ? la idea sería ocuparlo para que uno precione un botÓn y se desplieguen de a uno, mientras yo valla aprentando , se que para ustedes debe ser algo elemtal , pero paa mi un gran desafio , espero poder recibir su ayuda.

    pd: exelente sitio :)

  7. CSSLab Admin [#]

    Pablo, como habras leido debes utilizar un ID por cada link (ya q los ID’s son y deben ser unicos). ahora, para construir tu menu horizontal, mira el articulo donde ya se desarrollo el tema. Suerte.

  8. pablo vivanco [#]

    Hola , gracias por su respuesta pero , me refería a contruir claramente un menú horizontal de 6 botones por ejemplo , pero añadiendole movimiento de up y down de la libreria de JS, al hacer click . osea más que un simple menú quizas , apple ocupa algunos de estes recursos en su web site , espero me ayuden , gracias y buen día

    pd: http://www.apple.com/mac/ ahi salen en un sub menú abajo costado izquierdo

  9. gabriela [#]

    mi correo del msn no se abre por un problema de javascript

  10. Juan Perez [#]

    no me funciona me sale error de codigo.

  11. Buzu [#]

    Anonimo! Tu respuesta demuestra que tu concimiento en el mundo de internet no es tan amplio como deveria. Hay razones por las que un usuario puede entrar sin javascript que no estan bajo su control. No todos los usuarios que no tienen javascript es por que lo han desavilitado. muchos de ellos simplemente no lo tienen.

    Hay una solucion sencilla para ese problema y es cambiar la visibilidad del div mediante javascript, asi si el usuario no tiene el javascript avilitado o simplemente no tiene javascript, aun podra ver el div. Esto agrega un punto a usabilidad.

    Los efectos son bonitos pero sin no hay usabilidad en ellos o una manera de lograr graceful degradation es mejor no usarlos. Recordemos que diseñamos para el usuario final y no para lucir nuestro conocimiento.

    Por ultimo, las maravillas no son de las librerias sino del javascript en si mismo.

  12. chechu [#]

    muy buena la aportación, e interesantes librerías, como contrapartida … que un sitio accesible no podría utilizarlas al ser requisito tener javascript deshabilitado.

    un saludo!

  13. Mauricio [#]

    Buen aporte. parece que muchos piensan que puede haber otras formas de hacer, deberian(y asi se escribe por si acaso) ver que existen varios modelos que se podrian usar para una pagina en concreto, por lo menos a mi este ejemplo me sirvio para algo que queria hacer en mi tabla. si quisiera que salga un personaje con alas…pues buscaria eso…..no es sabio el que conoce el internet. es el que encuentra su herramienta y sabe amoldarla a su gusto .Saludos

  14. Tunisie annonce gratuite [#]

    C’est simple votre exemple

Deja tu Comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

CSSLab