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">
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.
<a href="#" id="toggle">My Section</a>
</span></h2>
<div id="section">
<div>
<!-- Your content here -->
</div>
</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.
Loading ...
Secciones líquidas en JQuery « El Blog de Javier Murillo
16-05-2008
Permalink
[...] 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
16-05-2008
Permalink
Me gusta mas tu version.. mas diseño!
Xtremo
16-05-2008
Permalink
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
16-05-2008
Permalink
[...] 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
16-05-2008
Permalink
Muchas gracias!
me sirvió bastante.
Van
16-05-2008
Permalink
Hola Nikko, verás. Estoy usando esta función de mootools y me encuentro con que IE no oculta las imágenes que estan contenidas en el panel que hace el slide. Así que me encomiendo a tí para saber si conoces algún método para solucionar esto (las imágenes se ven fuera de la zona de slide, solo en IE)
Si quieres ver el problema en concreto:
http://casajuan.kamchatka.es/
En esta dirección podrás ver cómo anda este sitio, está aún en bolillas.
Muchas gracias de antemano compa!
NOTA: Y aprovecho la consulta para preguntarte una cosilla más; cómo puedo hacer para que al pulsar sobre un de los botones que hacen el slide, el resto de haber alguno abierto, se cierren?? Vamos, que en el caso de tener los slides solapados como en mi caso, para q nunca coincidan abiertos. (creo q me expliqué un poco mal)