Javascript 
Menus Jquery Menu Slide
Menus Jquery Menu Slide Menus Jquery Menu Slide Today i will show you how to create a slide menu with CSS, HTML and Jquery. Is a menu which runs horizontally when mouse is over!
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Jquery Slide Menu</title>
<link type="text/css" href="style.css" rel="stylesheet" media="screen" />
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="menu.js"></script>
</head>
<body>
<div id="wrapper">
<ul id="menu">
<li><a href="#" title="Proin ultrices lacinia tellus at ">Home</a></li>
<li><a href="#" title="Duis vitae odio nec libero lobortis ">About Us</a></li>
<li><a href="#" title="Morbi condimentum massa at mauris ">Gallery</a></li>
<li><a href="#" title="Vestibulum magna nisi malesuada at ">Contact Us</a></li>
</ul>
</div>
</body>
*{
margin:0;
padding:0;
}
body{
font:12px Arial, Helvetica, sans-serif;
color:white;
background:url(bg.gif) repeat top center;
}
a{
text-decoration:none;
color:white;
}
#wrapper{
padding:40px 40px;
}
#menu{
float:left;
}
ul,li{
list-style:none;
}
li{
padding:10px 10px;
height:40px;
float:left;
width:100px;
background-color:#000010;
border-right:1px solid #ccc;
overflow:hidden;
display:block;
font-size:18px;
color:#F0FFFF;
}
li a{
float:left;
vertical-align:top;
position:absolute;
}
li a:hover{
float:left;
vertical-align:top;
position:absolute;
color:#999;
}
li p{
vertical-align:top;
text-align:left;
margin-left:0;
margin-top:0;
padding-left:100px;
width:110px;
text-align:right;
color:#CCCCCC;
display:none;
font-size:12px;
}
$(document).ready(function() {
// initialize default menu width
initwidth = $("li").width(); // updated
// hover in
$("li").hover( function(){
// get the title inside <a>
description = $(this).children("a").attr("title");
// start the animation
$(this).stop().animate({width: "220"},{queue:false, duration:"fast" });
// remove previously <p>
$(this).children("p").remove();
// create <p> and attach title into it
$(this).find("a").after("<p>"+description+"</p>")
// create animation to make it looks good
$(this).children("p").stop().animate({ opacity: "show" }, {queue:false, duration:"fast"});
// hover out
},function(){
// animate it to the basic width
$(this).stop().animate({width: initwidth},{queue:false, duration:"fast"});
// fade out animation
$(this).children("p").stop().animate({ opacity: "0" }, {queue:false, duration:"fast"});
});
});
