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; }
window.addEvent('domready', function()//inject divvar el = new Element('div', {'id': 'coupon','class': 'closed','text': ' '}).inject(document.body);//settingsvar state = 'closed';//add the click toggleel.addEvent('click', function() {//change the statestate = (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: