Fancy Animated Menu In Css And Jquery

by Nikhil Mangal

HTML

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<ul id="menu">
	<li><a href="#"><span class="one">Home</span><span class="two">Home</span></a></li>
   <li><a href="#"><span class="one">About</span><span class="two">About</span></a></li>
    <li><a href="#"><span class="one">Services</span><span class="two">Services</span></a></li>
    <li><a href="#"><span class="one">Company</span><span class="two">Company</span></a></li>
   <li><a href="#"><span class="one">Contact Us</span><span class="two">Contact Us</span></a></li>
</ul>

CSS

#menu
{
	margin:0px;
	padding:0px;
	list-style:none;
	font-family:Verdana, Geneva, sans-serif;
	border:solid 2px #532b04;
	height:40px;
	display:table;
	overflow:hidden;
}
#menu li
{
	float:left;
}
#menu li a
{
	height:40px;
	display:block;
	overflow:hidden;
	text-decoration:none;
}
#menu li a span.one
{
	text-decoration:none;
	display:block;
	height:40px;
	line-height:40px;
	background: #ffb76b; /* Old browsers */
background: -moz-linear-gradient(top,  #ffb76b 0%, #ffa73d 50%, #ff7c00 51%, #ff7f04 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffb76b), color-stop(50%,#ffa73d), color-stop(51%,#ff7c00), color-stop(100%,#ff7f04)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #ffb76b 0%,#ffa73d 50%,#ff7c00 51%,#ff7f04 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #ffb76b 0%,#ffa73d 50%,#ff7c00 51%,#ff7f04 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #ffb76b 0%,#ffa73d 50%,#ff7c00 51%,#ff7f04 100%); /* IE10+ */
background: linear-gradient(to bottom,  #ffb76b 0%,#ffa73d 50%,#ff7c00 51%,#ff7f04 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffb76b', endColorstr='#ff7f04',GradientType=0 ); /* IE6-9 */
color:#532b04;
font-weight:bold;
text-shadow:1px 1px 1px #fff;
padding:0px 20px;
font-size:14px;
border-right:solid 1px #532b04;
position:relative;

}
#menu li a span.two
{
	text-decoration:none;
	display:block;
	height:40px;
	line-height:40px;
	background: #ffb76b; /* Old browsers */
background: #aebcbf; /* Old browsers */
background: -moz-linear-gradient(top,  #aebcbf 0%, #6e7774 50%, #0a0e0a 51%, #0a0809 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#aebcbf), color-stop(50%,#6e7774), color-stop(51%,#0a0e0a), color-stop(100%,#0a0809)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #aebcbf 0%,#6e7774 50%,#0a0e0a 51%,#0a0809 100%); /* Chrome10+,Safari5.1+...

JavaScript

$(document).ready(function(e) {
    $('#menu li a').hover(function(){
		$(this).find('span.one').stop(true,false).animate({"margin-top":"-40px"},300);
	},function(){
		$(this).find('span.one').stop(true,false).animate({"margin-top":"0px"},300);
		});
});