Panel superior con deslizamiento utilizando mootools

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:

1. <script type=“text/javascript” src=“mootools.svn.js”></script>
2. <script type=“text/javascript”>
3. window.addEvent(‘domready’, function(){
4. var mySlide = new Fx.Slide(‘top-panel’);
6. $(‘toggle’).addEvent(‘click’, function(e){
7. e = new Event(e);
8. mySlide.toggle();
9. e.stop();
10. });
11. });
13. </script>

Un poco de CSS para dar estilo

PLAIN TEXT

CSS:

1. #top-panel{
2. background:#e8f3c6;
3. border-bottom:3px solid #a6c34e;
4. padding:14px 20px;
5. text-align:right;
6. }
7. #sub-panel{
8. text-align:center;
9. }
10. #sub-panel a{
11. width:150px;
12. float:right;
13. color:#FFFFFF;
14. text-decoration:none;
15. margin-right:30px;
16. font-weight:bold;
17. background:url(img/sub-left.png) bottom left no-repeat #a6c34e;
18. }
19. #sub-panel a span{
20. padding:6px;
21. background:url(img/sub-right.png) right bottom no-repeat;
22. display:block;
24. }
25. strong{color:#000000;}
26. .face{border:solid 2px #a6c34e; margin-left:10px; float:right;}

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

PLAIN TEXT

HTML:

1. <div id=“top-panel”><img src=“img/face.jpg” width=“40″ height=“40″ class=“face”/><strong>Nikko</strong><br />
2. Xyberneticos [Arroba] gmail.com<br />
3. Visite mi web: <a href=“http://xyberneticos.com”>xyberneticos.com</a></div>
4. <div id=“sub-panel”><a href=“#” id=“toggle”><span>Mostrar Panel</span></a></div>

~ por inotony en Marzo 12, 2008.