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? Hopefully you know what you’re getting into, let’s make this thing happen. Quick and easy, the general framework we’ll be using goes as follows: 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 in my example serves two purposes: Here’s the snippet that makes this all happen (With inline comments for explanations): 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. Live Demo : http://buildinternet.com/live/elasticthumbs Download : http://buildinternet.com/live/elasticthumbs/elasticthumbs.zipThe HTML
The CSS
The jQuery
Internet Explorer Image Scaling Fix
img { -ms-interpolation-mode: bicubic; }
0 comments