With jquery we can create amazing effects on the web pages, writing some few lines of codes, and you don’t need to be an experienced web programmer.

In this post I will show you how to create a nice and simple vertical menu with css and jquery, writing few lines of  code.

You can see the final result at this page, and you can download the complete source code with example from here.
First, download jquery from the official site, and after link it to your document. I’ve chooses to put the source code, for the css style and the javascript-jquery, in another file, you can put all in one if you want, IMHO I think is always better to separate it, it’s your choose.
Create the page and links the javascript file it’s really easy, how I suppose you know :

<link href=”style.css” rel=”stylesheet” type=”text/css”/>
<script src=”js/jquery.js” type=”text/javascript”></script>
<script src=”js/menu.js” type=”text/javascript”></script>

After I’ve created a simple page structure, with the menu,like the “semantic” want,  is  in a  list, in this case unordered :

<div id=”navigation”>
<ul>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>Freebies</a></li>
<li><a href=”#”>Tutorials</a></li>
<li><a href=”#”>Downloads</a></li>
<li><a href=”#”>Contact</a></li>
</ul>
</div>

Now  style the menu :

#navigation{
width: 200px;
}
#navigation ul{
list-style: none;
}
#navigation ul li{
height: 30px;
border-bottom: 1px dotted #ccc;
}
#navigation ul li a{
text-indent: 20px;
padding: 5px 0;
display: block;
height: 20px;
text-decoration: none;
color: #434343;
background-image: url(bull.png);
background-repeat: no-repeat;
background-position: 5px 6px ;
}
#navigation ul li a:hover{
background-color: #8E8963;
background-image: url(bull.png);
background-repeat: no-repeat;
background-position: 15px 6px ;
color: white;
}

What I’ve done here? Simply :

give to a menu a fixed with, styling the li and the link , give to a link a background image (background-image: url(bull.png); ) and when the mouse is over  (a:hover) , change the background color (not the image) and the link color.

Another thing to note is that I’ve used the backround-position property for the image, so with this I can move the image around  changing the values of the position (X and Y axis) and make this appear aligned with the text.

With Jquery I will “move” and animate the link on the right when the mouse is over, so I need to move the image too, and for the reason that I’ve used the image like background and no like image in the html code, I need to move that when the link will animated, maybe using directly the image in the code the effect will come better, you can try at your own.

Ok now we can go to our javascript and write the jquery-code . Create a new js file and call “menu.js”, write this simple code :

$(document).ready(function(){
var Duration = 150; //time in milliseconds

$(‘#navigation ul li a’).hover(function() {
$(this).animate({ paddingLeft: ’20px’ }, Duration);
}, function() {
$(this).animate({ paddingLeft: ’0px’ }, Duration);
});

});

OK  let me explain this code:

The first thing is to tell to jquery that, when the DOM is loaded ( this is rally important)  :

$(document).ready(function(){
});

This is the first thing that you must learn about Jquery, with this piece of code, you will tell to Jquery this :  “do the instruction only when the entire document is loaded”.

This is great and really usefull because  you don’t have to put any “behavioral” markup in the HTML, and this is the reason why you can separate every Javascript from the document.

After I’ve created the function that must be executed when the DOM is ready :

var Duration = 150; //time in milliseconds

$(‘#navigation ul li a’).hover(function() {
$(this).animate({ paddingLeft: ’20px’ }, Duration);
}, function() {
$(this).animate({ paddingLeft: ’0px’ }, Duration);
});

And it’s all! What it means this? I will try to explain in a simple words :

With the $(), you can get every element of the DOM, an it is like the documentGetElement in the normal javascript.

So I Want that ,when the mouse is over the tag li inside the navigation div, start the animation effect, so I’ll “take” this element with the dollar function

$(‘#navigation ul li a’)

This is the second important thing you must learn on Jquery.

And finally, I’ve used the animation on the menu, using the animate function of jquery, really simple to use, in this case I gave 20px at padding-left css property to make that the text “move” on the right side .

$(this).animate({ paddingLeft: ’20px’ }, Duration);

The $(this) refer to the element that we are using, animate is the jquery function (following the link you can learn more about this function) and Duration is the duration of the time, I’ve used a starting variable to give a value (var Duration = 150; ).

The rest of the code is another function to  ensure that the link returns at the original position.

,function() {
$(this).animate({ paddingLeft: ’0px’ }, Duration);
});

Conclusion : Jquery is the best framework that I’ve ever used, is simple, easy to learn and make the web designer’s life really easy, although you are not a experienced programmer.

Here the link relativies to jquery and maybe utils for this simple tutorial :

Download Jquery

Learn Jquery

The animate function of jquery

Well you can see the final results here :

Simple menu with Jquery.

Download jquery simple menu with example :

This posts may be interesting too

• How to send a mail with php ajax and jquery in facebook style
• Create a badge 2.0 with Photoshop
• Create a fire text with Photoshop
• Last Mac editors collection.
• Rain effect with photoshop in 6 steps

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.