Beautiful Jquery Animated Menu

Beautiful Jquery Animated Menu

Intro:-Hello Guys ! Beautiful Jquery Animated Menu is a Basic Menu bar using Jquery ,html and css.This Menu has a Very Sleek and Beautiful Hover Effect.It is quite easy to Implement also quite easy to understand.You can use this Animated Jquery Menu In your projects if you like it.Lets See the beautiful Jquery Animated Menu’s Full Tutorial.

Jquery Animated Menu Bar – Live Demo & Download

before Moving to Tutorial You can see the Live Demo of this Animated jquery Menu .see how it Looks.

Live Demo Download jquery Animate menu

Beautiful Jquery Animated Menu :: Tutorial

So Lets Move with our Jquery Animated Menu’s Tutorial.Firstly I am Gonna write its Mark Up structure.Basically every one Uses Html Lists for Menus and so am I.So now Lets see The Html Code for The Beautiful Jquery Animated Menu.

Animated Jquery Menu Bar -Markup

Mark Up for Jquery Animated Menu:-

<ul id="navigation">
    <li><a href="#">Home</a></li>
    <li><a href="#">About US</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Forum</a></li>
    <li><a href="#">Contact</a></li>
</ul>

Now this is the Quite simple Mark Up for a Menu .The same mark up we use for our menu’s.So its quite simple i guess.Now its Time to Apply Some Css.So it Might Look Great.

Animated Jquery Menu Bar – Styling with Css

Now We Are gonna Apply some css2 styles to Our menu bar so that our menu bar looks beautiful.So here is the Css Code.

Css Style(style.css)-

ul#navigation {
position:relative;
left:20%;
top:200px;
	margin: 0;
	padding: 0;
	list-style: none;
	float: left;
	font-size: 1.1em;
}
ul#navigation li{
position:relative;
	margin: 0px;
	padding: 0;
	overflow: hidden;
	float: left;
	height:80px;
	width:133px;
	border:1px solid #b3b3b3;
	text-align:center;
	background-color:white;
}
ul#navigation a {

	padding:30px 0px 30px 0;
	float: left;
	text-decoration: none;
	color: #000000;
	font-weight:bold;

	text-transform: uppercase;
	clear: both;
	width: 100%;
	height: 20px;
	line-height: 20px;
	position:relative;
	z-index:2;
}
ul#navigation a:hover {
color:white;

}
ul#navigation li span
{
position:absolute;
background-color:orangered;
height:0px;
width:0px;
left: 50%;
 top: 40px;
 overflow: hidden;
z-index:1;
}

Now These Are our Styles Applied to the Menu bar.Now After Applying these Styles Our Menu Might Look like This:

If your Menu Look Like This After Applying those Styles ,You are doing Fine.Now we Gonna Add jquery To this Menu.

Beautiful Animated Jquery Menu – Applying Jquery

Now We Apply javascript or jquery to Our menu bar to apply Animation to it.Here the Real Magic Begins.Here this Menu really Becomes Animated Jquery Menu.SO now Lets See the Jquery Code For Our Menu bar.

Jquery Code For Animated Menu(script.js) -

$(document).ready(function() {
	$("#navigation li").append("<span></span>");
	//hover over
	$("#navigation li").hover(function() {
		$(this).find("span").animate({
			height: "100%",width:"100%",left:"0px",top:"0px"
		}, 250);

	} , function() { 							//callback function
		$(this).find("span").stop().animate({
			height: "0px",width:"0px",left:"50%",top:"40px"
		}, 250);
	});

});

You see this Small and Tiny code does All the Magic.Now after Adding this Jquery Code to your script file you’ll get a very nice Hover Effect for your menu bar.You can Just download the whole source code from the Link Given below.

Jquery Animated Menu Bar – Live Demo & Download

Click The Links Below to Check The Live Demo Or Download Beautiful Animated Jquery Menu

Live Demo Download jquery Animate menu

I hope You enjoyed this post .Do share if you like this one cause ‘sharing is caring’. Thanks for visiting on designaeon.com .Keep Visiting