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
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
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
HTML:
-
Xyberneticos [Arroba] gmail.com<br />
SDaniel said,
Wrote on March 7, 2008 @ 3:20
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 said,
Wrote on March 7, 2008 @ 3:23
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 said,
Wrote on March 7, 2008 @ 5:10
Tengo problemas para subir el archivo principal por Ftp. Se corta y eso hace que suba dañado. ¿el problema? en mi conexión a Internet, ya me esta volviendo loko.
Ger said,
Wrote on March 7, 2008 @ 7:25
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 said,
Wrote on March 7, 2008 @ 7:44
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 said,
Wrote on March 7, 2008 @ 8:30
Bugs en IE6 & IE7, pero parecen fáciles de solucionar...
Pablo said,
Wrote on March 7, 2008 @ 19:14
La verdad que bastante interesante...
Vamos a ver como funca
Saludos
Pablo
Luis Fernando Montoya said,
Wrote on March 9, 2008 @ 10:42
El javascript es muy bueno, una pregunta este funciona offline. Es decir en una web grabada en un CD o DVD. Gracias.
lola said,
Wrote on March 9, 2008 @ 20:42
Gracias
Yuanga said,
Wrote on March 10, 2008 @ 19:39
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 said,
Wrote on March 23, 2008 @ 23:58
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 said,
Wrote on April 3, 2008 @ 18:59
Sigo sin saber como evitar el "salto" en IE al cerrarse...