Panel superior deslizante usando mootools

Hace tiempo leí en Woork un articulo en el que se explicaba como hacer un menú - o panel - superior deslizante utilizando mootools. Ahora, con mi blog mas o menos estabilizado hago una explicación / traducción del articulo original.

Sólo se necesitan 3 pasos para conseguir el efecto - y la funcionalidad - del script.

El primer paso es la parte HTML, realmente simple, una capa para el menú deslizante y otra con el boton para deslizarlo.

<div id="top-panel">
<!-- Top Panel content here -->
</div>
<div id="sub-panel">
<a href="#"id="toggle">
<span>Show Panel</span>
</a>
</div>

Añadiendo mootools en el header:

<script type="text/javascript" src="mootools.svn.js"></script>

Paso 2, los CSS. Esta es la propuesta de Woork, podéis editarla como os guste.

#top-panel{
background:#e8f3c6;
border-bottom:3px solid #a6c34e;
padding:14px 20px;
text-align:right;
}
#sub-panel{
text-align:center;
}
#sub-panel a{
width:150px;
float:right;
color:#FFFFFF;
text-decoration:none;
margin-right:30px;
font-weight:bold;
background:url(img/sub-left.png) bottom left no-repeat #a6c34e;
}
#sub-panel a span{
padding:6px;background:url(img/sub-right.png) right bottom no-repeat;
display:block;
}

¡Y tres! este pequeño JavaScript entre <head> y </head>.

<script type="text/javascript">
window.addEvent('domready', function(){
var mySlide = new Fx.Slide('top-panel');
$('toggle').addEvent('click', function(e){
e = new Event(e);
mySlide.toggle();
e.stop();
});
});
</script>

Podeis descargar el script completo y preparado en este enlace.

Aunque en el enlace de descarga del script está el código de mootools, en su página se puede descargar.

¡Deja un comentario! No necesitas registrarte : )

Articulos teóricamente relacionados: