Crear sección liquida expansible, con esquinas redondeadas usando CSS + mootools toggle effect

sliuidexpan.jpg

Un agradable tutorial en woork que explica como diseñar una bonita sección expansible con esquinas redondeadas en su parte superior izquierda, superior derecha, inferior izquierda, inferior derecha, utilizando CSS y a la cual le añadiremos un efecto que queda realmente bien “Efecto Toggle basado en mootools”, que nos permite básicamente esconder o volver a mostrar el contenido de dicha sección. Me pareció una forma muy practica para mostrar nuestro “about”, pero prácticamente aplicado de la forma correcta quedara bien con casi todo lo que deseemos usarlo.

Ver mi Demo - Descarga Mi demo - Ver demo Original - Ampliar info en woork

Instalar:
Descargamos los archivos necesarios, y realizamos el llamado correspondiente a ellos. Añadiendo dentro de nuestra etiqueta < head > el siguiente código.

JavaScript:
  1. <script type="text/javascript" src="mootools.svn.js"></script>
  2. <script type="text/javascript">
  3. window.addEvent('domready', function(){
  4.     var mySlide = new Fx.Slide('section');
  5.    
  6.     $('toggle').addEvent('click', function(e){
  7.         e = new Event(e);
  8.         mySlide.toggle();
  9.         e.stop();
  10.     });
  11. });
  12.  
  13. </script>

Y por ultimo nuestro html, donde añadiremos el contenido.

HTML:
  1. <a href="#" id="toggle">My Section</a>
  2. </span></h2>
  3. <div id="section">
  4. <!-- Your content here -->
  5. </div>
  6. </div>

En base a esto, con un poco de CSS se pueden lograr cosas muy bonitas y funcionales. En el ejemplo que he modificado y dejado para que descarguen, podrán ver un poco el código por dentro que seguramente les dará un poco de ideas. De todas formas, siéntanse libres de usarlo tal como esta.

  1. User Gravatar

    Secciones líquidas en JQuery « El Blog de Javier Murillo said,

    Wrote on May 16, 2008 @ 7:20

    [...] de blogs dedicados al tema. Uno de mis favoritos es el blog Xyberneticos, donde hoy leo una técnica para conseguir crear cabeceras de estilo “secciones de menú líquidas” bastante [...]

  2. User Gravatar

    nitos said,

    Wrote on May 17, 2008 @ 13:59

    Me gusta mas tu version.. mas diseño! :D

  3. User Gravatar

    Xtremo said,

    Wrote on May 17, 2008 @ 20:47

    Vaya que es muy bueno, siempre me han gustado este tipo de efectos pero desafortunamente no he tenido la oportunidad de utilizarlos...
    Gracias por el tuto!

  4. User Gravatar

    Expande tus secciones con mootols | power.org.mx said,

    Wrote on May 17, 2008 @ 23:46

    [...] Enlace de Referencia | [ Xyberneticos.com - Crear sección liquida expansible, con esquinas redondeadas usando CSS + mootools... ] Fuente del Articulo | [ Woork ] Demos : Xyberneticos | Woork Categorias: [...]

  5. User Gravatar

    Llusan said,

    Wrote on July 11, 2008 @ 3:51

    Muchas gracias!
    me sirvió bastante.

Seguir comentarios por RSS · TrackBack URI

Nombre: (Necesario)

E-mail: (Necesario)

Website:

Comment: