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
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>
<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
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;
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
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>
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>
Loading ...
SDaniel
07-03-2008
Permalink
En tu demo no pasa nada. Le doy click a "Mostrar Pánel" y nada.
Uso Ubuntu Gutsy Gibbon [7.10] con Firefox 2.0.0.12
Un saludo.
SDaniel
07-03-2008
Permalink
Lamento el doble comentario:
Acabo de descargar el .zip de la página del autor y este sí funciona bien. Estos comentarios por favor elimínalos cuando hayas solucionado el inconveniente, por favor tómalo como un aviso para que otros usuarios no vean el buen funcionamiento, no como un reclamo.
Nikko
07-03-2008
Permalink
Tengo problemas para subir el archivo principal por http://Ftp. Se corta y eso hace que suba dañado. ¿el problema? en mi conexión a Internet, ya me esta volviendo loko.
Ger
07-03-2008
Permalink
Hola Nikko muy bueno este javascript pero como se lo podría implementar en un blog de wordpress? Osea en que archivo se agregan las lineas del codigo, en el archivo header del tema?
Gracias!
Ger
07-03-2008
Permalink
Es así la primera pregunta! xD (yo mismo me respondo) pero tengo un problema, a la hora de hacer click en "Mostrar panel" no pasa nada o sino la pagina sube, espero tu ayuda!
Gracias Nuevamente....
Jaff
07-03-2008
Permalink
Bugs en IE6 & IE7, pero parecen fáciles de solucionar...
Pablo
07-03-2008
Permalink
La verdad que bastante interesante...
Vamos a ver como funca
Saludos
Pablo
Luis Fernando Montoya
07-03-2008
Permalink
El javascript es muy bueno, una pregunta este funciona offline. Es decir en una web grabada en un CD o DVD. Gracias.
lola
07-03-2008
Permalink
Gracias
Yuanga
07-03-2008
Permalink
Al ocultarse la pestaña da un salto y no queda como un movimiento fluido. Me pasa con IE7 (con Mozilla no). Como modifico el código para que esto no pase?
Víctor
07-03-2008
Permalink
Este slide panel es muy bueno. Su unico defecto es que sale abierto al inicio de la pagina, para evitar esto añadimos .hide() al final del evento domready así:
var mySlide = new Fx.Slide('login-panel').hide();
Y voilá.
Yuanga
07-03-2008
Permalink
Sigo sin saber como evitar el "salto" en IE al cerrarse...