sidepanel.jpg

En woork acabo de ver un pequeño tip o tutorial que explica cómo realizar un simple panel superior (arriba / abajo) con deslizamiento utilizando mootools, algo un poco similar a Height transitions que vimos hace meses. El resultado es muy agradable, o por lo menos a mi, me ha gustado mucho, es mas, creo que lo implementare aquí en el blog. Espero les agrade tanto como a mi, y sobre todo les sea útil.

Ver Demo - Mas info y descarga ejemplo Sliding top panel using mootools
Uso:
Añadimos mootools dentro de nuestra etiqueta < head >... y la Función JavaScript

PLAIN TEXT
JavaScript:
<script type="text/javascript" src="mootools.svn.js"></script>
<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>

Un poco de CSS para dar estilo

PLAIN TEXT
CSS:
#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;

}
strong{color:#000000;}
.face{border:solid 2px #a6c34e; margin-left:10px; float:right;}

Y por ultimo la estructura donde añadiéremos nuestro contenido

PLAIN TEXT
HTML:
<div id="top-panel"><img src="img/face.jpg" width="40" height="40" class="face"/><strong>Nikko</strong><br />
  Xyberneticos [Arroba] gmail.com<br />
Visite mi web: <a href="http://xyberneticos.com">xyberneticos.com</a></div>
<div id="sub-panel"><a href="#" id="toggle"><span>Mostrar Panel</span></a></div>