Elastic Thumbnail Menu

0
Category: , ,
Sproing! – Make An Elastic Thumbnail Menu; Si buscabas métodos alternativos para construir los menús de las web que desarrollas, el menú de miniaturas elásticas pueda ayudarte un poco a salir de lo habitual. ¿Qué hace exactamente?, Aumenta los elementos del menú cuando se posa sobre él. Y donde los elementos del menú se amplían hacia arriba.

Ver Demo
PLAIN TEXT
HTML:
 
<div id="menuwrapper">
<div id="menu"><a class="menuitem" href="#"><img src="image.jpg" alt="" /></a><!--Template for each menu item--></div>
</div>
 
PLAIN TEXT
CSS:
 
/* The container which the menu is "locked" to the bottom of */
#menuwrapper{ position:relative; height:210px; } /* Fixes the whole menu to the bottom of the parent div */
#menu{position:absolute; bottom:0;}
/* Each individual menu item fixed to the bottom with display:inline-block to create elasticity */
.menuitem{ position:fixed relative; bottom:0px; display:inline-block; }
 
PLAIN TEXT
JavaScript:
 
$(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
});
});
Internet Explorer no realizara un buen trabajo a menos que agreguen la siguiente línea CSS:
PLAIN TEXT
CSS:
 
img {ms-interpolación de modo: bicúbico;}
Mas Info Sproing! – Make An Elastic Thumbnail Menu