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.