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…
March 12th, 2010 at 12:26 PM
Going to have so much fun playing around with this in a new project. I want to combine this effect with a few AJAX scripts to create a site that almost acts as a UI from an OS.
May 5th, 2010 at 4:06 AM
This tutorial is really damn beautiful. Nice code!
May 7th, 2010 at 6:30 PM
Thank you. I know where to put the CSS code, but I dont know (beginner here) where to add that html code and especially the jquery code. Should I add the latter to a new file and name it *.js ?
Thanx
May 21st, 2010 at 1:48 PM
so, how do i integrate this into wordpress?
May 24th, 2010 at 10:31 AM
Your website is incredibly beautiful and useful. I have taken liberty to add this article to my CSS aggregator site. I hope you wont mind that.
June 18th, 2010 at 11:49 AM
We are testing this on our works website as the IT department get jobbed for this role. Works great but in Firefox it goes wild have you any ideas.
June 21st, 2010 at 10:34 PM
It’s very good.
I like this.
Thanks for share.
And I wrote something to introduce this project for my readers.
You can find the post about this in my website.
If something is wrong,pls figure it out.thanks.
July 16th, 2010 at 1:42 PM
Great Stuff Thanks!
July 22nd, 2010 at 4:19 AM
Thanks for this great tutorial, how can i use it for “related post” on wordpress ?
my email befashionlike@gmail.com
July 22nd, 2010 at 12:55 PM
How can i do if i want change the width by percent and not by px??
July 23rd, 2010 at 10:42 AM
Hey wicked effect, what if you have like 20+ images you want to apply this to, but want it to fit within an 800px width div, is there a way to automatically scroll left and right once a user gets towards either side?
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.