jQuery Flipping Menu Tutorial using backgroundPosition Plugin

Written by Kevin Liew on 16 Sep 2009
103,071 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
Helder 10 years ago
Hi,

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

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