En otros post, ya había escrito sobre recursos para implementar contenidos deslizantes como Sliding Top Menu que utiliza jQuery. Toggling Announcement Slider es similar pero está desarrollado con Mootools.
Es muy sencillo de implementar, primero hay que enlazar Mootools en la sección header:
<script type="text/javascript" src="moo1.2.js"></script>
<script type="text/javascript">
Luego ha que definir el estilo en la CSS del diálogo deslizante:
#coupon { top:0; right:100px; position:absolute;
cursor:pointer;
width:585px;
background:url(slider-coupon.png) 0 bottom no-repeat; }
.closed { height:29px; }
.open { height:176px; }
En este punto, se está definiendo en el ID coupon, la posición, el tipo de cursor, el ancho y el fondo. En la clase closed, se define el tamaño que tiene cuando no está guardado y en la clase open, el tamaño cuando está completamente desplegado, en ambos casos se trata de la altura del contenedor.
El paso final, es definir el Javascript que controla y llama a las funciones de Mootools.
window.addEvent('domready', function()
//inject div
var el = new Element('div', {
'id': 'coupon',
'class': 'closed',
'text': ' '
}).inject(document.body);
//settings
var state = 'closed';
//add the click toggle
el.addEvent('click', function() {
//change the state
state = (state == 'closed' ? 'open' : 'closed');
el.morph('.' + state);
});
});
El ejemplo está bien sencillo, a los efectos didácticos, por lo que susceptible de mejoras y un excelente recurso si es que quieres seguir investigando y aprendiendo.
Build a Toggling Announcement Slider Using MooTools 1.2:
