Menú Efecto "Subir & Rebotar"

Vieron el efecto que tiene el menú de publicidad ¿? {Eso espero, esta hecho a propósito para llamar la atención & cumplir el objetivo de publicidad} Bueno, eso les enseñare, como colocar el efecto en las imágenes.

1.- PRIMER PASO:
Debes tener la imagen que tendrá cada "link" del menú  debe ser completa, es decir, con la imagen que se vera al comienzo & la que se vera después:

2.- SEGUNDO PASO:

Luego de ya tener la imagen deseada, vamos al tema del script & el codigo HTML/CSS.
Vamos a plantilla / edición HTML / buscamos {ctrl + F} la linea:

</body>

ARRIBA pegar:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src='http://loefa-cebook.googlecode.com/files/jquery.easing.1.3.js' type='text/javascript'></script>
<script type="text/javascript">
$(document).ready(function(){

$(".contoh2").hover(function(){
$("img", this).animate({top:"-50px"},{
queue:true,
duration:500,
easing:'easeOutBounce'
});
}, function() {
$("img", this).animate({top:"0px"},{
queue:true,
duration:500,
easing:'easeOutBounce'
});
});

});

</script>

SI EDITAMOS LA DIRECCIÓN DEL MOVIMIENTO {debes cambiar la imagen que editaste}
"bottom" [abajo]: deja el mismo desplazamiento {-50px} e invierte tu imagen así:

 "right" [derecha]: debes cambiar el desplazamiento de la mitad del largo de tu nueva imagen {en este caso, -225px ya que es una imagen de 450px}, ej:

"left" [izquierda]: cambia el desplazamiento & la imagen {invertida} igual que en "right", ej:

3.- TERCER PASO:

Ahora, volvemos a buscar {ctrl + F} la linea:

]]></b:skin>

ARRIBA pegar:

.MSR {
margin:3px;
float:left;
width:225px;height:50px;position:relative;
overflow:hidden;
}
.MSR img {
 position:absolute;
}

EDITAMOS:
Como vimos en el momento de editar el "desplazamiento" el numero en negativo {-} se basa en el ancho & alto de tu imagen, que se edita aquí. [Si, puedes utiliza cualquier tamaño de imagen para este efecto.]

4.- CUARTO PASO:

Ya tenemos todos los códigos necesarios, ahora a colocar el menú.

En un gadget javascript/HTML pegar:

{coloca cuantos necesites para tu menú, serán los links que tendrá, yo utilice 7}

<div class="MSR">
<a href="LINK"><img src="URL DE TU IMAGEN"/></a>
</div>

& con estos pasos tendrás tu menú con un efecto original & divertido.

Si no tienes ganas de editar imagen por imagen, aqui me tome la molestia de diseñar los "bottones" básicos de un menú!♥ Con diferentes motivos:

{DESCARGA}

El pack contiene:

• SOLO TRAE IMÁGENES [no contiene los códigos incluidos].
• 4 carpetas con diferentes estilos de imágenes {cuatro "links" c/u} & desplazamientos {left, bottom, top, right}
• Una de las carpetas tiene dos versiones del estilo, "completo" {con los títulos incluidos} & "para edición propia" {vacíos para que le coloquen los "títulos" que desees}
• 1 Estilo extra de "edición propia" {con 4 imagenes/"links"} para que tu completes con los "títulos" que desees.

Creditos del script a su respectivo autor.