jQuery Flipping Menu Tutorial using backgroundPosition Plugin

jQuery Flipping Menu Tutorial using backgroundPosition Plugin


jQuery Flipping Menu Tutorial using backgroundPosition Plugin

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!

Author: Kevin Liew

Kevin Liew is a web designer and developer and keen on contributing to the web development industry. He loves frontend development and absolutely amazed by jQuery. Feel free to say hi to me, or follow @quenesswebblog on twitter.

Share the love

24 comments

kevin Admin
Wed, 6th January 2010
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
Wed, 6th January 2010
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
Sun, 10th January 2010
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
Mon, 11th January 2010
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
Tue, 12th January 2010
thanks will try that.
Reply
bastr3
Mon, 18th January 2010
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
Sat, 6th February 2010
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
Sun, 7th February 2010
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
Fri, 5th March 2010
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
Mon, 26th April 2010
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
Tue, 27th April 2010
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
Tue, 8th June 2010
hi, this is great i love it,
anyway is this compatible with IE6 or above?
thanks Reply
Rujito
Thu, 14th October 2010
Thanks a lot men! awsome! Reply
Helder
Fri, 8th April 2011
Hi,

Can you tell what is the name of the font used for the images?

Regards, Reply
Kevin Liew Admin
Sun, 10th April 2011
Sorry, I can't remember. Reply
Jane
Fri, 6th May 2011
How do you get the background position jquery plugin ?I can't find it.Could you send it to me? Reply
Kevin Liew Admin
Mon, 9th May 2011
manos
Wed, 27th July 2011
Hello, i am trying to use this script in a page where i use lightbox and the effect does not work Is there any fix for this? It is emergency... Reply
Kevin Liew Admin
Wed, 27th July 2011
emergency mode means debugging mode! what js framework is your lightbox using? are there any javascript conflict? you can check javascript error with firebug console. Reply
manos
Thu, 28th July 2011
it seems that there is a conflict with prototype.js Reply
snooze
Sat, 17th March 2012
I had tried many examples of here, but they were not work all when I tried to use to change to use the other fonts for my language such as Thai by UTF-8, Windows-874, or Unicode fonts. Reply
Garrett
Mon, 3rd June 2013
Nice writeup. I've created a jQuery plugin that creates similar menus without background images for those who are interested.
https://github.com/grimmdude/jQuery-menuFlip

-G Reply
Gustove
Thu, 15th August 2013
how to make this plugin run in 1.8.1 + min.js?
coz in 1.8+ min.js no backgroundPosition function.
Thx. Reply
Kevin Admin
Thu, 15th August 2013
Hi Gustove, backgroundPosition is a CSS property known as background-position. It's not a function, it's just telling jQuery animate method to animate the CSS background-position.

So, it should work well with jQuery 1.8.1 too. Please check if there's any conflict or javascript error in your console. Reply

Leave a Comment

Please keep in mind that comments are moderated and rel="nofollow" is in use. You can use [code][/code] if you want to write codes. Don't spam us :) Thanks!

Advertisement