A Stylish Navigation Menu With jQuery

Demo  | Download

Make An Elastic Thumbnail Menu - Boing Boing

En un intento constante de ofrecer métodos alternativos para arreglar los menús, he reconstruido un menú en miniatura elástica.

¿Qué hace exactamente?

     * Amplía las opciones de menú cuando se esta sobre el elemento.
     * Los elementos de menú se expanden.
     * Ver la demostración para ver en acción.

El HTML

Rápido y fácil, el marco general que va a utilizar es el siguiente:

El CSS

Normalmente, cuando una etiqueta div tiene que ampliar para dar cabida a más contenido, lo hace hacia abajo, añadiendo altura en la parte inferior del elemento en lugar de la parte superior. Para este menú nos quieren hacer exactamente lo contrario - cuando el usuario se desplaza sobre la miniatura debe ampliar hacia arriba (pensar sobre cómo funciona el muelle de OSX).

Vamos a ir sobre esto, haciendo uso de la posición: fijo, que básicamente nos permite "fijar" los elementos en el fondo. Analicemos por los elementos.

/* 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-table to create elasticity */
.menuitem{ position:fixed relative; bottom:0px; display:inline-table; } 

El jQuery

en mi ejemplo sirve a dos propósitos:

    1. Cambiar el tamaño de las imágenes a tamaños más pequeños cuando las cargas de la primera página.
    2. Animar a las imágenes de mayor tamaño cuando sobrevolaban.

He aquí el fragmento de código que hace todo esto posible (con comentarios en línea para las explicaciones):

$(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 escalado de imagen Fix

Esto ha sido señalado a la atención antes, pero cuando se trata de cambiar el tamaño de imágenes, Internet Explorer no hacer un buen trabajo a menos que agregue las siguientes líneas en tu CSS:

img { -ms-interpolation-mode: bicubic; }

Después de ocuparse de ese arreglo, su menú está listo para rodar, muy bien hecho.