How to Create a Elastic Thumbnail Menu with CSS and jQuery

I was going around the web looking for some interesting tutorials and found this one I would like to share. This is an elastic thumbnail menu which combines HTML, CSS and jQuery to create a cool zoom effect and expand upwards when an image is hovered over.

The HTML Code (plain and simple):

<div id="menuwrapper">
	<div id="menu">
		<a href="#" class="menuitem"><img src="image.jpg"/></a>
	</div>
</div>

The CSS Code:

This menu will be a bit different from conventional menus and the when the user hovers over the thumbnail, the image will expand to the right and upwards.

The main piece to acheive this effect is position:fixed;, which keeps the thumbnails aligned to the bottom.

#menuwrapper{ position:relative; height:210px; }

#menu{position:absolute; bottom:0;}

.menuitem{ position:fixed relative; bottom:0px; display:inline-block; }

img { -ms-interpolation-mode: bicubic; }

Note that for this effect to work in Internet Explorer, we need to add img { -ms-interpolation-mode: bicubic; } to our CSS file.

The jQuery Code:

$(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

	});
});

See the demo here

Source: build internet

Back to top ↑

1 comment so far »

  1. Joseph wrote on June 21, 2011 @ 7:35 am

    Thank you for the great tip!

Comment RSS · TrackBack URI


Back to top ↑

Leave a comment

Name: (Required)

E-mail: (Required)

Website:

Comment:

Spam protection:
What is the sum of 3 + 8 ?