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):
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:
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.