jQuery: Cool Bouncing Navigation with easing plugin

Here, I will be showing you how to create a cool bouncing navigation with jQuery and jQuery easing plugin. The content appears with the bouncing effect as you navigate through the menu.

You need jQuery Library and the jQuery easing plugin. But you need not worry, I have zipped them all in the download file.

View Demo || Download Code

Basically, there are 3 parts – CSS, HTML and Javascript.

Here is the HTML part:-

<div id="container" align="center">
	<h2>Bouncing Navigation</h2>

	<div id="navigation">
		<a class="home" href="#">Home</a>		
		<a class="contact" href="#">Contact</a>
		<a class="links" href="#">Links</a>
		<a class="about" href="#">About</a>
	</div>
	<br/>

	<div class="content home"><h3>Home</h3></div>
	<div class="content contact hide"><h3>Contact</h3></div>
	<div class="content links hide"><h3>Links</h3></div>
	<div class="content about hide"><h3>About</h3></div>		
	
</div>
<div style="border-bottom: 1px solid #CCCCCC"></div>

In the HTML part, the div with id=navigation contains menus. And the div with the class=content contains the content data related with each menu. By default, only the home content is shown. The rest of others are made hidden.

The displaying, hiding, padding, maintaining width, height, font color, background color, etc. are controlled by CSS. Here is the CSS part:-

#container {	
	padding: 10px;
	min-height: 350px;
}
#navigation a {
	text-decoration: none;
	padding: 10px;
	color: #F3F3F3;
}
#navigation a:hover {
	text-decoration: underline;
}
.home {
	background: #0292C0;
}
.contact {
	background: #6AA63B;
}
.links {
	background: #D52100;
}
.about {
	background: #FBC700;
}
.content {	
	border: 1px solid #336699;
	width: 300px;	
	height: 300px;
	padding: 10px;	
	color: #F3F3F3;
}
.hide {
	display: none;
}

The bouncing effect is performed through Javascript.

$(function(){				
	$("#navigation a").click(function(){				
		$(".content."+$(this).attr("class")).animate({height: "1px"},50);
		$("[class^=content]").addClass("hide");			
		$("[class^=content]").removeAttr("style");			
		$(".content."+$(this).attr("class")).animate({height: "300px"},{duration: 1000, easing: "easeOutBounce"});			
	});		
});

In the JS code above, the effect is performed when the a href link of div id=navigation is clicked. Here are the steps performed:-
– make the height of content to 1px with animate function.
– add class hide to all div with class content
– remove style attribute from the div with class content
– animate the div content to the height 300px with easeOutBounce effect (This effect is one of the effects of jQuery easing plugin. This gives the bouncing effect.)

That’s all we need for the cool bouncing navigation effect.

View Demo || Download Code

Thanks.