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.
Discussion
September 21st, 2009 at 12:18 AM
Awesome effect guys! I’m trying to get more into web design and this really helps. Thx
September 21st, 2009 at 1:12 AM
Haha sweet!
September 21st, 2009 at 3:55 AM
This effect is cool and easy to do. Cool, i love your tutorial. But it’s better when you display the menu items as unordered list as usual.
September 21st, 2009 at 4:09 AM
Great effect, might use that one day
.-= Callum Chapman´s last blog ..The Circlebox Monthly: 18th September 2009 =-.
September 21st, 2009 at 6:22 AM
you guys know what you are talking about. very cool
September 21st, 2009 at 7:52 AM
Great tutorial, love the demo. Keep up the good work
.-= Alex´s last blog ..How to set up a hotel reservation form in a WordPress page =-.
September 21st, 2009 at 9:20 AM
Great effect. Now it needs .focus adding for those who can’t use a mouse but still need to see which link they are focussed on.
September 21st, 2009 at 9:50 AM
Nice. You can use the .hover shorthand for .mouseover and .mouseout.
September 21st, 2009 at 9:59 AM
It doesn’t work with IE…I hate IE…but really cool effect
September 21st, 2009 at 3:07 PM
Wow, that is not a lot of code to get that effect! Nice!
September 21st, 2009 at 4:55 PM
@Christian
Thanks for pointing that out, I fixed it up. I should have used display:inline-block rather than display:inline-table. I’ve updated the download/demo
September 21st, 2009 at 9:39 PM
nice effect, maybe i can use it in my blog
.-= taquito´s last blog ..Virtua Tennis 2009 [Full | Multi-Esp.100%] =-.
September 22nd, 2009 at 4:53 AM
Wooow, nice one, just like Ted sad, not a lot of code for that great effect
.-= Ivan Mišić´s last blog ..Prvi koraci nakon instalacije Wordpressa =-.
September 22nd, 2009 at 5:41 AM
Nicely done. Reminds me of a mac OS like toolbar plugin I saw a while back.
Since you are allowing people to download the code and posting snippets, you should accompany that with a license, so developers know what is allowed and what is not.
Thanks for sharing
.-= CertPal´s last blog ..Response: Are Naming Conventions Still Needed For Abstract Classes? =-.
September 22nd, 2009 at 12:24 PM
The demo is great. This is a really cool effect. Nice Work.
.-= Yasmin Lawsuit´s last blog ..Birth Control Linked to Medical Problems =-.
September 22nd, 2009 at 10:52 PM
Nice!
.-= Jason´s last blog ..How to Create an Ajax Style File Uploader =-.
September 23rd, 2009 at 6:20 AM
Hey; do you think this would work with text? If so, how would I do that?
September 25th, 2009 at 10:29 AM
Your site is very good. There are useful information and most importantly, for sharing great. Thank you ….
September 26th, 2009 at 1:42 PM
Great idea – but when I tried the demo in Firefox, all the menus sprung up and aligned vertically! Is it supposed to do that?
October 3rd, 2009 at 4:17 AM
Cool effect. Thanks for sharing this. I really love your site, especially how much great content you already have for a young site.
.-= Jad Graphics´s last blog ..Outer Space Text Effect =-.
October 7th, 2009 at 5:13 AM
The effect is kickass. But unlike in the demo, the images align vertically and the effect screws up.
And the position parameter has no effect on the sproing, whether it is absolute or fixed
.-= Richie´s last blog ..Inspiration #1 : What does it take to become a dedicated artist? =-.
October 13th, 2009 at 10:55 AM
I liek the tutorial. How could I make the last button go only to the left like the first button goes to the right?
October 14th, 2009 at 3:36 PM
Another Great Tut!
I will have to try this out ASAP!
October 25th, 2009 at 1:45 AM
it gives error on (“.menuitem img”) http://www.alpinacolor.ee/tooted
December 3rd, 2009 at 5:44 AM
Please tell that for a font on this picture?
http://buildinternet.com/live/elasticthumbs/officeal.jpg
In advance many thanks
December 25th, 2009 at 4:19 AM
thx collect it to ajax.wespai.com
January 13th, 2010 at 2:42 AM
cool effect
will try to use it, thanx dude
January 15th, 2010 at 3:16 AM
Pretty god but that’s been done about 3.8 million times already… I’m by no means an expert at CSS or javascript but I developped the exact same same thing on my blog about 1 year ago.
What would have been interesting, although not a new implementation either, is that the images on each side of the one being hovered would grow as well, by something like half the amount…
Join the Conversation!
Remember: Life's not all doom and gloom, so please keep it constructive. If we've made an error or missed something big, please let us know! Learning is revisions, after all.