Menu efecto items elásticos usando JQuery y CSS

Este es in efecto usando JQuery muy interesante para un menú. Al pasar el puntero del ratón sobre los items del menú, estos se agrandan (con sensación de elasticidad) y nuevamente vuelven a su tamaño original si el puntero abandona el item:

Menú original

El Item se agranda al pasar sobre el

CODIGO

<div>
<html>
<head>
<script src="jquery.min.js"></script>
</head>
<body>
<script>$(document).ready(function(){
 $('.menuitem img').animate({width: 100}, 0); //Set all menu items to smaller size
 $('.menuitem').mouseover(function(){ //When mouse over menu item
 gridimage = $(this).find('img'); //Define target as a variable
 gridimage.stop().animate({width: 200}, 150); //Animate image expanding to original size
 }).mouseout(function(){ //When mouse no longer over menu item
 gridimage.stop().animate({width: 100}, 150); //Animate image back to smaller size
 });
 });

<table summary="menu" width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr>
<td>
<div id="menuwrapper">
<div id="menu"><a class="menuitem" href="#"><img src="4.png" alt="" /></a>
 <a class="menuitem" href="#"><img src="1.png" alt="" /></a>
 <a class="menuitem" href="#"><img src="2.png" alt="" /></a>
 <a class="menuitem" href="#"><img src="6.png" alt="" /></a>
 <a class="menuitem" href="#"><img src="3.png" alt="" /></a>
 <a class="menuitem" href="#"><img src="8.png" alt="" /></a>
 <a class="menuitem" href="#"><img src="9.png" alt="" /></a></div>
</div></td>
</tr>
</tbody>
</table>
</div>
<pre>

ESTILO CSS

</pre>
<div>html, body {
font-family:verdana;
font-size: 10pt;
background: #ffffff
}

/* Container which the menu is "locked" to bottom of */
#menuwrapper{ position:relative; height:210px; }

/* Fixes the whole menu to the bottom of the parent div */
#menu{position:absolute; bottombottom:0;}

/* Each individual menu item fixed to the bottom with display:inline-block */
.menuitem{ position:fixed relative; bottombottom:0px; display:inline-block; }</div>
<pre>



 Google+

Acerca de Patricia Juberias

https://patyjg.wordpress.com

Publicado el 19 mayo, 2011 en DISEÑO Y NUEVAS TECNOLOGIAS y etiquetado en , , , , , , , . Guarda el enlace permanente. Deja un comentario.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: