Sproing! – Make An Elastic Thumbnail Menu
In an ongoing attempt to offer alternative methods to spruce up menus, I’ve pieced together an elastic thumbnail menu.
What does it do exactly?
- Magnifies menu items when they are hovered over.
- Menu items expand upwards.
- View the demo to see it in action.
Hopefully you know what you’re getting into, let’s make this thing happen.
The HTML
Quick and easy, the general framework we’ll be using goes as follows:
<div id="menuwrapper"> <div id="menu"> <a href="#" class="menuitem"><img src="image.jpg"></a><!--Template for each menu item--> </div> </div>
The CSS
Normally when a div tag has to expand to accommodate more content, it does so downwards, adding height onto the bottom of the element rather than the top. For this menu we will want to do the exact opposite – when the user hovers over the thumbnail it should expand upward (think about how the OSX dock works).
We’re going to go about this by making use of position:fixed, which essentially lets us “fix” elements to the bottom. Let’s break down the elements.
/* 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; }
The jQuery
The jQuery in my example serves two purposes:
- Resize images to smaller sizes when page first loads.
- Animate images to larger size when hovered over.
Here’s the snippet that makes this all happen (With inline comments for explanations):
$(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 Image Scaling Fix
This has been brought to attention before, but when it comes to resizing images, Internet Explorer won’t do a good job unless you add the follow line into your css:
img { -ms-interpolation-mode: bicubic; }
After taking care of that fix, your menu is ready to roll, nicely done.
