Easy jQuery menu.

[Josh[y]]

I am just starting with jQuery, and this was pretty cool to make. So I thought I could share it with you guys!

First things first, you HAVE to add this into your header.


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>


Next, add this to your stylesheet file:


ul.jqueryslider {
list-style-type: none;
width: 200px;
}

ul.jqueryslider li {
background: #555555;
padding: 5px;
color: #fff;
}

ul.jqueryslider li a:link, ul.jqueryslider li a:visited {
color: #fff;
text-decoration: none;
display: block;
}

ul.jqueryslider li a:hover, ul.jqueryslider li a:active {
color: #fff;
text-decoration: none;
display: block;
}

Or add this to your header:


<style type="text/css">
ul.jqueryslider {
list-style-type: none;
width: 200px;
}

ul.jqueryslider li {
background: #555555;
padding: 5px;
color: #fff;
}

ul.jqueryslider li a:link, ul.jqueryslider li a:visited {
color: #fff;
text-decoration: none;
display: block;
}

ul.jqueryslider li a:hover, ul.jqueryslider li a:active {
color: #fff;
text-decoration: none;
display: block;
}
</style>


Then, put this wherever you want the menu to show:


<ul class="jqueryslider">
<li><strong><a href="#">List item.</a></strong></li>
<li><strong><a href="#">List item.</a></strong></li>
<li><strong><a href="#">List item.</a></strong></li>
<li><strong><a href="#">List item.</a></strong></li>
</ul>


And finally, the simple jQuery code that gets the job done. Put it in your header:


$(document).ready(function() {
// jQuery slider menu
$('ul.jqueryslider li').hover(function() {
$(this).animate({paddingLeft: "10px", backgroundColor: "#333333"},200);
}, function() {
$(this).animate({paddingLeft: "5px", backgroundColor: "#555555"},200);
});
});

Or if you have an external .js file, just put this:


// jQuery slider menu
$('ul.jqueryslider li').hover(function() {
$(this).animate({paddingLeft: "10px", backgroundColor: "#333333"},200);
}, function() {
$(this).animate({paddingLeft: "5px", backgroundColor: "#555555"},200);
});


And thats it! You should now have a nice dark grey menu, with links that, when hovered over, slide slightly to the right.