Tutorials

jQuery Flipping Menu Tutorial using backgroundPosition Plugin

Written by Kevin Liew on 16 Sep 2009
86,471 Views • Shares
24 comments

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
Helder 5 years ago
Hi,

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

Regards,
Reply
Kevin Liew Admin 5 years ago
Sorry, I can't remember.
Reply
Jane 5 years ago
How do you get the background position jquery plugin ?I can't find it.Could you send it to me?
Reply
manos 5 years ago
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 5 years ago
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 5 years ago
it seems that there is a conflict with prototype.js
Reply
snooze 4 years ago
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 3 years ago
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 3 years ago
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 3 years ago
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