Javascript 
Menus jQuery Menu Rotation
Menus jQuery Menu Rotation Menus jQuery Menu Rotation Today i will present you a jQuery Menu Rotation!
<link rel="stylesheet" href="style.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script language="javascript">
$(document).ready(function() {
$("#menu li a").wrapInner( '<span class="out"></span>' );
$("#menu li a").each(function() {
$( '<span class="over">' + $(this).text() + '</span>' ).appendTo( this );
});
$("#menu li a").hover(function() {
$(".out", this).stop().animate({'top': '45px'}, 200); // move down - hide
$(".over", this).stop().animate({'top': '0px'}, 200); // move down - show
}, function() {
$(".out", this).stop().animate({'top': '0px'}, 200); // move up - show
$(".over", this).stop().animate({'top': '-45px'}, 200); // move up - hide
});
});
</script>
<div id="content">
<div id="menu" class="menu">
<ul>
<li><a href="javascript:;">Home</a></li>
<li><a href="javascript:;">Work</a></li>
<li><a href="javascript:;">Services</a></li>
<li><a href="javascript:;">Support</a></li>
<li><a href="javascript:;">Contacts</a></li>
</ul>
</div>
</div>
body {
background:url(bg.gif) repeat top center;
font-family:Arial, Helvetica, sans-serif;
font-size: 16px;
line-height: 1.6;
}
#content {
width: 750px;
margin: 50px auto;
}
.menu {
height: 45px;
display: block;
}
.menu ul {
list-style: none;
padding: 0;
margin: 0;
}
.menu ul li {
float: left;
overflow: hidden;
position: relative;
text-align: center;
line-height: 45px;
}
.menu ul li a {
position: relative;
display: block;
width: 110px;
height: 45px;
font-family: Arial;
font-size: 11px;
font-weight: bold;
letter-spacing: 1px;
text-transform: uppercase;
text-decoration: none;
cursor: pointer;
}
.menu ul li a span {
position: absolute;
left: 0;
width: 110px;
}
.menu ul li a span.out {
top: 0px;
}
.menu ul li a span.over,
.menu ul li a span.bg {
top: -45px;
}
#menu {
background: #008E8E;/*here is color of the background menu*/
}
#menu ul li a {
color: #FFF; /*here is color of the text */
}
#menu ul li a span.over {
background: #FFF; /*here is color of the text when mouse is over*/
color: #000; /*here is color of the text when mouse is over*/
}
