Button Flick

Pongamos que tenéis un vínculo en una imagen y que queréis ir a él...al pasar el ratón encima... se produce un efecto "cortina": la imagen "sube" y desaparece, para dejar paso a otra nueva. Esto es lo que hace "Burtton Flick". Y para muestra, el "button" en mi blog de pruebas, bajo el menú Flash-sin flash.

Para conseguirlo necesitamos:

.- UN CSS:

margin:0;
padding:0;
}
body {
background-color:#ccc;
}
#nav {
list-style:none;
float:right;
}
#nav li {
float:left;
}
#nav a, #nav a .btn {
width:135px;
height:100px;
text-align:center;
padding-top:11px;
text-decoration:none;
font-family:Arial, sans-serif;
font-weight:bold;
letter-spacing:-1px;
}
#nav a {
background:url(http://.../hp-invent.gif) no-repeat top left;
display:block;
color:#fff;
font-size:1.5em;
position:relative;
}
#nav a.active {
cursor:default;
}
#nav .btn {
background:url(http://.../temp01.jpg) no-repeat top left;
color:#6E6941;
}

.- SCRIPTS:

<script src='http://.../mootools-release-1.11.js' type='text/javascript'/>
<script type='text/javascript'>



var ButtonFlick = {

start: function () {

$$(&#39;#nav li a&#39;).each(function(el){

if (el.hasClass(&#39;active&#39;)) return;

var text = el.getText();

var button = new Element(&#39;div&#39;, {&#39;class&#39;:&#39;btn&#39;})

.setText(text)

.injectInside(el);

var buttonfx = new Fx.Slide(button, {

&#39;wait&#39;:false,

&#39;transition&#39;:Fx.Transitions.Cubic.easeInOut,

&#39;duration&#39;:350

});

buttonfx.wrapper.setStyles({

&#39;position&#39;: &#39;absolute&#39;,

&#39;top&#39;: 0,

&#39;left&#39;: 0

});

el.addEvents({

&#39;mouseenter&#39;: function () {

buttonfx.slideOut();

},

&#39;mouseleave&#39;: function () {

buttonfx.slideIn();

}

});

});

}

}



window.addEvent(&#39;load&#39;, function(){

ButtonFlick.start();

});



</script>

.- HTML:

<ul id='nav'>

<li><a href='http://cafe-junio.blogspot.com/'>Epílogo</a></li>



<li><a href='http://menupececillos.blogspot.com/'>Peces</a></li>

<li><a class='active' href='http://otromenu.blogspot.com/'>Página actual</a></li>

<li><a href='http://menudivertido.blogspot.com/'>Menú</a></li>

</ul>

Vía chromasynthetic