Fancy Animated Menu In Css And Jquery

Fancy Animated menu with CSS and Jquery, Simple code for animating menu just copy and paste this code into your website

CSS CODE

#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+ */
background: -o-linear-gradient(top,  #aebcbf 0%,#6e7774 50%,#0a0e0a 51%,#0a0809 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #aebcbf 0%,#6e7774 50%,#0a0e0a 51%,#0a0809 100%); /* IE10+ */
background: linear-gradient(to bottom,  #aebcbf 0%,#6e7774 50%,#0a0e0a 51%,#0a0809 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aebcbf', endColorstr='#0a0809',GradientType=0 ); /* IE6-9 */

color:#fff;
font-weight:bold;
text-shadow:1px 1px 1px #000;
padding:0px 20px;
font-size:14px;
border-right:solid 1px #532b04;
}

JQUERY CODE

HomeHome
AboutAbout
ServicesServices
CompanyCompany
Contact UsContact Us

Download File Used in this example View Live Demo

Total Downloads: