jQuery Flipping Menu Tutorial using backgroundPosition Plugin

Written by Kevin Liew on 16 Sep 2009
102,397 Views • Tutorials

Introduction

Sometimes, simplicity is the most beautiful thing. This tutorial uses images and jQuery animate plus backgroundPosition Plugin to make the flipping/rotating effect. This will be a simple tutorial and I believe it has a great potential to become something really creative. Check out the demo and I hope you all will like it.

1. HTML

As usual, we want to keep the HTML as simple as possible. I guess this is the minimal code for a menu.

	<b>Horizontal Menu</b>
	<ul id="hor">
		<li><a href="#" class="home">Home</a></li>
		<li><a href="#" class="download">Download</a></li>
		<li><a href="#" class="contact">Contact</a></li>

	</ul>

	<div class="clear"></div>
	<br/><br/>

	<b>Vertical Menu</b>
	<ul id="ver">
		<li><a href="#" class="home">Home</a></li>
		<li><a href="#" class="download">Download</a></li>
		<li><a href="#" class="contact">Contact</a></li>
	</ul>

2. CSS

This time, we don't have to do much with the CSS. The following is just a simple configuration of a menu. With a little bi of CSS Sprites used for the menu images, the rest are just basic CSS.

/* CSS Style for Horizontal Menu */	
#hor {
	list-style:none;
	padding:0;
	margin:0;	
}

	#hor li {
		float:left;
		padding:5px;
	}

	#hor a {
		display:block;
		height: 12px;
		text-indent:-999em;
	}
			
	#hor a.home {
		width:46px; 
		background:url(vHome.gif) no-repeat 0 0;	
	}

	#hor a.download {
		width:94px; 
		background:url(vDownload.gif) no-repeat 0 0;	
	}
			
	#hor a.contact {
		width:74px; 
		background:url(vContact.gif) no-repeat 0 0;	
	}


/* CSS Style for Vertical Menu */	
	
#ver {
	list-style:none;
	padding:0;
	margin:0;	
}
		
	#ver li {
		padding:2px;	
	}
		
	#ver li a {
		display:block;
		height:12px;
		text-indent:-999em;
	}			
			
	#ver a.home {
		width:47px; 
		background:url(hHome.gif) no-repeat 0 0;	
	}

	#ver a.download {
		width:95px; 
		background:url(hDownload.gif) no-repeat 0 0;	
	}
			
	#ver a.contact {
		width:74px; 
		background:url(hContact.gif) no-repeat 0 0;	
	}
			
			
	.clear {
		clear:both;	
	}	

3. Javascript

With the background position jquery plugin, what we need to do is to set the backgroundPosition properties to the right top and left value.

	
$(document).ready(function () {

	/* Horizontal Menu */
	$('#hor li a').hover(
		function () {
			//convert current height to negative value
			height = $(this).height() * (-1);
			$(this).stop().animate({'backgroundPosition':'(0 ' + height + ')'}, {duration:200});	
		}, 
			
		function () {
			//reset the top position
			$(this).stop().animate({'backgroundPosition':'(0 0)'}, {duration:200});	
		}
	);

	/* Vertical Menu*/
	$('#ver li a').hover(
		function () {
			//convert current width to negative value
			width = $(this).width() * (-1);
			$(this).stop().animate({'backgroundPosition':'(' + width + ' 0)'}, {duration:200});	
		}, 
			
		function () {
			//reset the left position
			$(this).stop().animate({'backgroundPosition':'(0 0)'}, {duration:200});	
		}
	);
		
});

Conclusion

Like this tutorials? You can express your gratitude by visiting my sponsors on the sidebar, buy me a drink in the bottom of the page or, just bookmark it and help me to spread this tutorial to the rest of the people who you think they are interested! :) Thanks!

Demo Download
Join the discussion

Comments will be moderated and rel="nofollow" will be added to all links. You can wrap your coding with [code][/code] to make use of built-in syntax highlighter.

24 comments
kevin Admin 11 years ago
hi sara... have you tried to remove all the margin and padding of the item and set a fixed height... i hate ie6....
Reply
sara 11 years ago
hi,

i recreated this menu for my website and have horizontly centred it on my page, but when checking it on Internet Explorer 6 and above the images seem to be visable both top and bottom of rollover part.

i have tried everything, no problems in safari or firefox. Any help?
Reply
sara 11 years ago
yeah i know how you feel... i have tested it on another computer with internet explorer and it seems to be fine so i'm thinking it may just be that computer...

Also sorry if this seems a bit dumb but how would i keep the button from rolling back to it's original state once the viewer is on the page it links to... i have tired adding 'selected' to the class but it doesn't seem to be working...

Thanks
Reply
kevin Admin 11 years ago
hi sara, sorry for the late reply. yes, selected class would be the way to go... you need to declare selected and set the background position to the active state. that should work.
Reply
sara 11 years ago
thanks will try that.
Reply
bastr3 11 years ago
thanks ... how i can select one link?
I mean when I press on the link within the image remains fixed and the rest of the links work normally, and when you press on the other link interface Previous become animate and the link that you press them become stable
Reply
mel 11 years ago
Hi,

i followed your tutorial, altering only
the images used. i want to do two things... 1, have a larger space between the horizontal images...
2, this is really troublesome... i don't want my text to float on the left of the horizontal menu, instead i want it centred in the page, i have tried nearly everything... it's probably something really simple, any help would be great, i can post my css code if that will help.

thanks
Reply
mel 11 years ago
Hi,

it's ok i figured it out after going back to it after a couple of hours later... must have been tired.

Great tutorial by the way.
Reply
scott bourn 10 years ago
hi there

im trying to get this to work with my wordpress them but i can :-(

my site is the one im trying to add it to ??

where do i add this
$(document).ready(function () {

/* Horizontal Menu */
$('#hor li a').hover(
function () {
//convert current height to negative value
height = $(this).height() * (-1);
$(this).stop().animate({'backgroundPosition':'(0 ' + height + ')'}, {duration:200});
},

function () {
//reset the top position
$(this).stop().animate({'backgroundPosition':'(0 0)'}, {duration:200});
}
);
Reply
Alexander 10 years ago
Hi,

First of all, this is an awesome tutorial.

Now,

I was wondering if there is any way of keeping the colored link when the link corresponds to the active page.

Thanks a lot.

AB.
Reply
kevin Admin 10 years ago
Hi Alexander, yes, I believe you could, you just have to declare a class that set the background position to the red color. and then you can put the class in the link.
Reply
kriscahya 10 years ago
hi, this is great i love it,
anyway is this compatible with IE6 or above?
thanks
Reply
Rujito 10 years ago
Thanks a lot men! awsome!
Reply