CSS - Bitácora Josep Viciana

ESCRITO POR Josep Viciana EL 28-07-2008 - EN LA CATEGORÍA Cursos y tutoriales, Internet.

Hace ya un mes o dos que salió Firefox 3, y con él algunos temas que había notado que cambiaban respecto a Firefox 2, me refiero - además de las evidentes mejoras - al borde punteado que aparece al clickar en enlaces y objetos flash, el punteado se puede eliminar mediante CSS, con una sóla linea.

Panel superior deslizante usando mootools

ESCRITO POR Josep Viciana EL 27-03-2008 - EN LA CATEGORÍA Mootools, jQuery.

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.

Se busca friki

Eliminar borde punteado en Firefox 3

Panel superior deslizante usando mootools