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

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