Crear sección liquida expansible, con esquinas redondeadas usando CSS + mootools toggle effect
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.
-
<script type="text/javascript" src="mootools.svn.js"></script>
-
<script type="text/javascript">
-
window.addEvent('domready', function(){
-
var mySlide = new Fx.Slide('section');
-
-
$('toggle').addEvent('click', function(e){
-
e = new Event(e);
-
mySlide.toggle();
-
e.stop();
-
});
-
});
-
-
</script>
Y por ultimo nuestro html, donde añadiremos el contenido.
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.
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 [...]
nitos said,
Wrote on May 17, 2008 @ 13:59
Me gusta mas tu version.. mas diseño!
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!
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: [...]
Llusan said,
Wrote on July 11, 2008 @ 3:51
Muchas gracias!
me sirvió bastante.