Juan Manuel 15 de julio de 2008 a las 12.02
   Imprimir artículo
elWebmaster.com

Crea un anuncio desplegable en CSS y Javascript con MooTools 1.2


Crea un anuncio desplegable en CSS y Javascript con MooTools 1.2Muchos estaban preguntando c√≥mo crear en un borde de su sitio web o blog una pesta√Īa din√°mica que al hacer clic en ella despliegue un panel con publicidad, un par de campos de login de usuario, enlaces, etc. Esto es muy sencillo de hacer si nos ayudamos con CSS y Javascript (via MooTools).

Y aquellos que se est√©n preguntando qu√© pasa si alguien desactiva Javascript en nuestro sitio pero no desactiva los estilos CSS, les cuento que tambi√©n tenemos un truco para que no aparezca el panel en este caso. ¬ŅQu√© esperan para comenzar?

Un anuncio desplegable en CSS y Javascript con MooTools 1.2

Los estilos CSS:

#panel { top:0; right:100px; position:absolute; cursor:pointer; width:585px;
background:url(slider-panel.png) 0 bottom no-repeat; }
.closed { height:29px; }
.open   { height:176px; }

Como pueden ver, estoy usando la imagen de “panel” como fondo de un DIV que pienso crear con MooTools. Las propiedades “top” y “right” me permiten posicionar el panel y agregu√© “cursor:pointer” para que los usuarios se den cuenta que deben hacer clic sobre la pesta√Īa. La altura seteada en las clases “open” y “closed”cubren la altura total de la imagen y la pesta√Īa.

Javascript (con la ayuda de MooTools):

window.addEvent('domready', function() {
//creo el div
var el = new Element('div', {
'id': 'panel',
'class': 'closed',
'text': ' '
}).inject(document.body);
//seteoss
var state = 'closed';
//agrego el despliegue por clic
el.addEvent('click', function() {
//cambio el estado
state = (state == 'closed' ? 'open' : 'closed');
el.morph('.' + state);
});
});

El c√≥digo, como ven, es realmente simple. Una vez que el DOM est√° listo, inyecto en DIV “panel” en el body de la p√°gina. Ah√≠ agrego un track al estado del panel desplegable. Despu√©s un evento “click” en el DIV “panel” que cambia el estado del elemento y hace un morph a la propiedad de clase open/close que corresponda. ¬°Eso es todo!

El panel podr√≠a tambi√©n usar “mouseenter” y “mouseleave”, para desplegarse sin necesidad de hacer clic.

Haz clic aquípara ver una demo online.

¬ŅQu√© pasa si el usuario ha desactivado Javascript pero no CSS en la p√°gina?

Para sortear este problema y evitar que se vea el panel suelto por ahí se podría agregar:

panel{display:none;top:0; right:100px; position:absolute; cursor:pointer; width:585px; background:url(slider-coupon.png) 0 bottom no-repeat;}

Y luego cambiar la regla via javascript a display:inline.

¬°Espero que te sirva!

Fuente: DavidWalshBlog


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (3)

  1. Gabriel Marques dice:

    Mira no es un comentario.. pero no sabes
    como puedo generar un rectangulo con bordes redondeados y degradé en css?

  2. Juan Manuel dice:

    ¬°Hola, Gabriel!

    Tengo una nota que te explica cómo hacer muy fácilmente (haz clic aquí).

    ¬°Muchos saludos!

  3. Jesus dice:

    Oyes brother, felicidades por la nota, aunque me preguntaba como creo un anuncio con javascript pero que cuando carge la pagina aparesca sobreponido, en la pagina, sin crear otra ventana pues, y que dure un tiempo y luego se cierre como los anuncion de gobierno en el msn, no se si lo has visto, saludos!!

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder