Animated Navigation Menu with CSS3

June 1st

19 Comments

Since Last some days we are writing articles on CSS3. And today we will learn here to create animated navigation menu with css3. Here will try to create animated menu with css3 and also will create the same animation using jQuery. So lets start..

Check Out Demo First

So now we assume that we guys have checked the demo. Now we know what we really going to create so here first of all we need HTML documentation. We need here unordered list and will have two div elements with different attributes in li tags. We will use two div elements in li tags because we will separate them with margin in our css codes later with setting ul tags overflow to hidden and when as soon as user hover over li tag we will move the displayed div element to top to show the hidden element. Anyways lets first code HTML codes. Then we will go to css coding.

HTML

<div id="menu-demo">
<ul>
    	<li>
        <div id="up"><a href="#">Home</a></div>
	<div id="slide"><a href="#">Home</a></div>
	</li>
 
        <li>
        <div id="up"><a href="#">About Us</a></div>
	<div id="slide"><a href="#">About Us</a></div>
        </li>
 
        <li>
        <div id="up"><a href="#">Services</a></div>
	<div id="slide"><a href="#">Services</a></div>
        </li>
 
        <li>
        <div id="up"><a href="#">Contact Us</a></div>
	<div id="slide"><a href="#">Contact Us</a></div>
        </li>
</ul>
</div>

Now CSS.. Explanation is in codes only as comments

Set Overflow of UL tag as hidden so when the slide animation will start div up will hide and div slide will shown

Here we will use CSS3 Gradient to style menu background, Text shadow, Box shadow and CSS3 Animation for animation purpose

#menu-demo ul {
	width:500px;
	height:50px;
	background-color:#CCC;
	overflow:hidden;
	/*CSS3 Border radius*/
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	/*CSS3 Box Shadow*/
	-moz-box-shadow:1px 2px 4px #666;
	-webkit-box-shadow:1px 2px 4px #666;
	/*CSS3 Gradient Property for menu*/
	background-image:-moz-linear-gradient(rgb(48,161,171), rgb(56,192,207));
    background-image:-webkit-gradient(linear, 0% 0%, 0% 100%,
                          from(rgb(48,161,171)), to(rgb(56,192,207)));
 
}
#menu-demo li {
	float:left;
	list-style-type:none;
	margin-left:40px;
	text-shadow: 1px 1px 2px #ccc;
}
#menu-demo li a {
	text-decoration:none;
	color:#303;
	font-size:20px;
	font-family:Tahoma, Geneva, sans-serif;	
}
#up {
	margin-top:13px;
	margin-bottom:40px;
}
li:hover {
	/*As soon as hover over li elements animation will start*/
	-webkit-animation-name: slide;
	/*Duration of Animation would be 1 Second*/
	-webkit-animation-duration: 1s;
}
@-webkit-keyframes slide {
	0% { margin-top: 0px;}
	/* When animation completed the li will move up 60pixel*/
	100% { margin-top: -60px;}
}

Same Effect With jQuery

NOw we will achieve the same effect with jquery animate property.

$(document).ready(function() {
	$("#menu-demo li").hover(function() {//as soon as the mouse hovers over li
		$(this).stop().animate({//animation will start now
			marginTop: "-60"//move li tag up with 60px
		}, 1000);//time to complete animation would be 1 second
	} , function() {
		$(this).stop().animate({
			marginTop: "0"
		}, 0);
	});
 
});