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

  1. <div id="menuwrapper">
  2. <div id="menu"><a class="menuitem" href="#"><img src="image.jpg" alt="" /></a><!--Template for each menu item--></div>
  3. </div>
  1. /* The container which the menu is "locked" to the bottom of */
  2. #menuwrapper{ position:relative; height:210px; }
  3.  
  4. /* Fixes the whole menu to the bottom of the parent div */
  5. #menu{position:absolute; bottom:0;}
  6.  
  7. /* Each individual menu item fixed to the bottom with display:inline-block to create elasticity */
  8. .menuitem{ position:fixed relative; bottom:0px; display:inline-block; }
  1. $(document).ready(function(){
  2. $('.menuitem img').animate({width: 100}, 0); //Set all menu items to smaller size
  3.  
  4. $('.menuitem').mouseover(function(){ //When mouse over menu item
  5.  
  6. gridimage = $(this).find('img'); //Define target as a variable
  7. gridimage.stop().animate({width: 200}, 150); //Animate image expanding to original size
  8.  
  9. }).mouseout(function(){ //When mouse no longer over menu item
  10.  
  11. gridimage.stop().animate({width: 100}, 150); //Animate image back to smaller size
  12.  
  13. });
  14. });

Internet Explorer no realizara un buen trabajo a menos que agreguen la siguiente línea CSS:

  1. img {ms-interpolación de modo: bicúbico;}

Mas Info Sproing! – Make An Elastic Thumbnail Menu