Sproing! – Make An Elastic Thumbnail Menu

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:

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 jQuery

The jQuery in my example serves two purposes:

  1. Resize images to smaller sizes when page first loads.
  2. Animate images to larger size when hovered over.

Here’s the snippet that makes this all happen (With inline comments for explanations):

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:

After taking care of that fix, your menu is ready to roll, nicely done.

Posted Monday, September 21st, 2009 · Back to Top

SPONSOR

Add Comment

87 Comments 149 Mentions

  1. Tim Smith Author Editor

    Awesome effect guys! I’m trying to get more into web design and this really helps. Thx ;-)

    ·

  2. Evan Jones Author Editor

    Haha sweet!

    ·

  3. Rilwis Author Editor

    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.

    ·

  4. Callum Chapman Author Editor

    Great effect, might use that one day :)
    .-= Callum Chapman´s last blog ..The Circlebox Monthly: 18th September 2009 =-.

    ·

  5. brian Author Editor

    you guys know what you are talking about. very cool

    ·

  6. Alex Author Editor

    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 =-.

    ·

  7. AskTheBigO Author Editor

    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.

    ·

  8. memowe Author Editor

    Nice. You can use the .hover shorthand for .mouseover and .mouseout.

    ·

  9. Christian Author Editor

    It doesn’t work with IE…I hate IE…but really cool effect

    ·

  10. Ted Goas Author Editor

    Wow, that is not a lot of code to get that effect! Nice!

    ·

  11. Sam Dunn Author Editor

    @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

    ·

  12. taquito Author Editor

    nice effect, maybe i can use it in my blog :)
    .-= taquito´s last blog ..Virtua Tennis 2009 [Full | Multi-Esp.100%] =-.

    ·

  13. Ivan Mišić Author Editor

    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 =-.

    ·

  14. CertPal Author Editor

    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? =-.

    ·

  15. Yasmin Lawsuit Author Editor

    The demo is great. This is a really cool effect. Nice Work.
    .-= Yasmin Lawsuit´s last blog ..Birth Control Linked to Medical Problems =-.

    ·

  16. Jason Author Editor

    Nice!
    .-= Jason´s last blog ..How to Create an Ajax Style File Uploader =-.

    ·

  17. Soph – - Author Editor

    Hey; do you think this would work with text? If so, how would I do that?

    ·

  18. Flex developer Author Editor

    Your site is very good. There are useful information and most importantly, for sharing great. Thank you ….

    ·

  19. Kathryn Author Editor

    Great idea – but when I tried the demo in Firefox, all the menus sprung up and aligned vertically! Is it supposed to do that?

    ·

  20. Jad Graphics Author Editor

    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 =-.

    ·

  21. Richie Author Editor

    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? =-.

    ·

  22. C Author Editor

    I liek the tutorial. How could I make the last button go only to the left like the first button goes to the right?

    ·

  23. Chris Pierre Author Editor

    Another Great Tut!
    I will have to try this out ASAP!

    ·

  24. Teet Author Editor

    it gives error on (“.menuitem img”) http://www.alpinacolor.ee/tooted

    ·

  25. Евгений Author Editor

    Please tell that for a font on this picture?
    http://buildinternet.com/live/elasticthumbs/officeal.jpg

    In advance many thanks

    ·

  26. wespai Author Editor

    thx collect it to ajax.wespai.com

    ·

  27. abdullah alaydrus Author Editor

    cool effect

    will try to use it, thanx dude

    ·

  28. Jonathan Foucher Author Editor

    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…

    ·

  29. Muxx Author Editor

    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.

    ·

  30. Hiep Author Editor

    This tutorial is really damn beautiful. Nice code!

    ·

  31. Mouad Author Editor

    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

    ·

  32. donna Author Editor

    so, how do i integrate this into wordpress?

    ·

  33. sivaranjan Author Editor

    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.

    ·

  34. Rob Author Editor

    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.

    ·

  35. 123doing Author Editor

    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.

    ·

  36. galaxark Author Editor

    Great Stuff Thanks!

    ·

  37. befashionlike the fashion blog Author Editor

    Thanks for this great tutorial, how can i use it for “related post” on wordpress ?
    my email befashionlike@gmail.com

    ·

  38. Dann Author Editor

    How can i do if i want change the width by percent and not by px??

    ·

  39. James Author Editor

    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?

    ·

  40. Nutaryuk Author Editor

    I’m a beginner in blogging.
    This is a great tips for my blog.
    Thank you very much.

    ·

  41. Kibal4iw Author Editor

    that this is for bottombottom:0; in css, please be careful.

    ·

  42. Abdullah Author Editor

    just what ive been looking for the past few weeks!!
    nice work guys

    ·

  43. BB Author Editor

    Nice one. Its innovative and cool!

    ·

  44. offday Author Editor

    Awesome effect. I was wondering if it is possible to get the effect go down instead of going up?

    ·

  45. Chichote Author Editor

    Hello.
    I made a modification of the script and add a horizontal menu drop.

    http://chichote.com/2010/simple-menu-dock-desplegable-con-jquery/

    thanks.

    ·

  46. Adie Author Editor

    Nice work.

    I’m pretty sure the same or similar effect could be created using CSS transform as well.

    ·

  47. Barkın Author Editor

    Hi . I cant use it in aspx MasterPage.cs file ? Is it for pure HTML only or I do something wrongly. It works in a pure HTML file by the way. Thank you.

    ·

    • Zach Dunn Author Editor

      There’s no reason that you wouldn’t be able to use this in ASP since JavaScript is client side.

      ·

      • Barkın Author Editor

        sure it is.. :) The problem is for another javascript .js file is found in the same aspx file. (for another image slider..) Maybe it avoids elastic thumb. menu carousel. Because when I tired to use to get all the above code from another aspx, it’s worked properly. Thank you Zach.

        ·

  48. toun Author Editor

    clever! thnx for sharing

    ·

  49. Stew Author Editor

    Awesome! Nice lightweight interactive menu. Will definitely look into using something like this.

    ·

  50. John Author Editor

    How do I expand the images starting from bottom right instead of left?

    ·

  51. Ildi Author Editor

    This is brilliant, just what I’ve been looking for! I copy pasted all the coding (which doesn’t mean an awful lot to me) but must have got something wrong as the images display vertically?? I don’t even know where to look…

    ·

    • Ildi Author Editor

      Sorry, take no notice of me, talking nonsense…. I’ve just realised that my theme has a #wrapper too and that’s what’s causing the problem! :)

      ·

    • Cheyanna Author Editor

      Never would have thunk I would find this so inisdpensable.

      ·

    • diyflkbxr Author Editor

      U3ms0X ardyrnbkkjgv

      ·

  52. web designing uae Author Editor

    Just love the demo.Thanks for the share.

    ·

  53. Colchester Website Design Author Editor

    Great work… very simple and effective!!!

    ·

  54. Dortcelik Cocuk Hastanesi Randevu Alma Author Editor

    Thanks for sharing and keep up the good work. That is a great article.

    ·

  55. طراحی وب سایت Author Editor

    Thanks for posts

    ·

  56. KaleidoMatt Author Editor

    A great technique and interaction with such simple code. What’s the best method of centre aligning the menu? Is this possible?

    ·

  57. Eva Author Editor

    Let’s try! Thank you! :)

    ·

  58. Paul Author Editor

    Sam,

    Nice job and many thanks. However it only seems to work with jQuery 1.3.1 or older. Is there anything that can be done so that it works with later versions of jQuery?

    ·

  59. mike Author Editor

    This looks great, but! how about a more indepth tutorial on how it all links together?

    ·

  60. alovilla Author Editor

    thank you.nice job

    ·

  61. Colchester Printers Author Editor

    This is great.. Can the Div have any name or is it set?

    ·

  62. Exphor Author Editor

    How can I get one of the images to stay large, say when that link is active.

    ·

    • mell Author Editor

      did you find out?

      ·

  63. Uriah Author Editor

    Quite long, i don’t understand.

    ·

  64. Farm Gate Author Editor

    rather radical. Even so, I am sorry, because I can not subscribe to your whole plan, all be it refreshing none the less. It would seem to everyone that your commentary are not completely validated and in actuality you are generally yourself not totally certain of the point. In any case I did appreciate examining it.

    ·

  65. Website Design Author Editor

    Is there a way of of animating like a carousel?

    ·

  66. rubén Author Editor

    I love it. Theres just one step I don’t know how to do due to my ignorance… The third code, the jQuery one… Do I have to paste it into the code of my page? If so… where in it?

    ·

  67. Logo EPS Author Editor

    Great tutorial
    one question: how about a more indepth tutorial on how it all links together?

    ·

  68. Digital Ark Author Editor

    Very good, well designed solution.

    Thank you for sharing.

    Simon

    ·

  69. Serhat Author Editor

    Thanks for shared.. nice script.

    ·

  70. kayseri emlak Author Editor

    I love it. Theres just one step I don’t know how to do due to my ignorance

    ·

  71. kayseri satılık daire Author Editor

    This looks great, but! how about a more indepth tutorial on how it all links together?

    ·

  72. kayseri kiralik daire Author Editor

    Nice job and many thanks

    ·

  73. XTC_300 Author Editor

    Hi Sam,

    unfortunatly your code does not work – neither your demo nor my attempt to rebuild it locally at my pc with current jquery 1.8.0 (both tried with firefox browser).

    Do you have any suggestions ?

    ·

    • Sam Dunn Author Editor

      jQuery 1.8 has been known to cause issues with older scripts – I would check the javascript console for errors if you choose to use this version.

      ·

  74. Stephen Hannon Author Editor

    I’m new to css ect so is there an in depth tutorial anywhere that I can follow ?

    ·

  75. Ali Author Editor

    Very good menu and animasyon. Thanks.

    ·

  76. Drew Author Editor

    Thank you very much for this. For anyone not sure where to place the jquery code, make sure (at least this worked for me) to place it inside the tag within your header.php file for the WordPress users.

    And add this piece of line:

    before:

    if you haven’t yet called to the ‘googlecode…’ library yet

    ·

  77. Dave Author Editor

    In the sample code you have:

    bottombottom: 0;

    Pretty sure this is a typo, as it’s throwing syntax errors in my editor and I don’t remember any bottombottom attributes ;). I changed it to bottom: 0; and the positioning went to the top of the page, outside the menuwrapper, changing it to 1 brought it back to where it should be under the wrapper. Just in case anyone else is having issues with this part of the css.

    Anyone not sure where to put the jquery, you need to put it in between tags between the tags and after you have loaded the jquery via your link call.

    ·

  78. Dave Author Editor

    Ok, so I saw some people in the comments asking for a more in depth tutorial, so I did one up real quick to show you how to get this working. As I’m sure the author is busy, and I had the time, it was no big deal for me to knock it out. https://www.youtube.com/watch?v=XyWlL4UYLgk

    ·

  79. DesignOHO Author Editor

    Thank for this script. I like it.

    ·

 

Build Internet by One Mighty Roar. Since 2008.