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.

software feel free to let us know using the comments below

Textmate

My preferred text editor, amazing!
TextMate is not an IDE but by using its powerful snippets, macros, and unique scoping system, it can often provide features that even a language specific IDE lacks. It has enough project management features to keep most users happy, but is otherwise kept lightweight with a clean and minimalistic GUI.
It cost €48.75 for 1 license, but I suggest you to try the trial version to evaluate the powerful of this fantastic editor. You can take a look to the wiki , for all the features of Textmate.

Download Textmate.

Coda.

Another powerfull editor for the Mac user. Coda, I think, is the most complete editor for mac, is no WYSIWYG, but has a lots of features, and can work with a lots of languages. Autocomplete,complete support to html, css, php,javascript and other languages, site management, with the last adds,like the plugin sistem, or subversion control, make it one of the best web editor that you can find actually for mac.
It cost $99, but I think this will be money well spend.

Download Coda.

Css Edit

The king of the Css editor in absolute.
An amazing editor for css, the most complete that I ever used.
I suggest to buy this, only 29.95€ to have the best editor actually for css.
Autocomplete, visual editing, and other lots of function, make css edit the best css editor for mac of ever.

Download Css Edit.

Espresso.

Recently launched from mac rabbit, the same company of css edit, is a good html editor, not as coda or textmate, in my own opinion, but a good solution using with css edit. I’m triyng now the trial version and thinking if to buy or not, but for the moment I prefer textmate, that cost less and is more powefull.

Download Espresso.

Aptana Studio.

A free and complete Ide for work on you web project, is based on Eclipse, so you can use like eclipse plugin or standalone editor(I prefer this solution). you can extend it with plugin to work with php, ruby on railsm Python Java etc… The build an Ajax server too, Jaxer, and support the most used ajax and javascript libraries, like Jquery, Mootools etc.etc. A really powerful Ide, and free!! The only think that I don’t like from this editor is that is too much slow, like ecplipse, so for this reason I prefer work with textmate. BUt if you are searching for a powerful and complete ide editor for your porject, maybe you can consider to download and try aptana studio.

Download Aptana Studio.

Color schemer studio.

Powerful software for all the designers. I love this software, great software that help us to find the right colors scheme of a website.

You can use color schemer studio to help you to choose the perfect harmony color scheme for you projects.
Work with a dynamic visual color wheel, instantly explore harmony relationships and even let ColorSchemer Studio intelligently suggest color schemes for you!
Yes, this is another great software, on the website you can take a look to the scheme color published too.
it cost : $49.99, you can buy directly from the website and try the trial before.

Download Color Schemer Studio.

The Gimp.

The free alternative to photoshop, The GNU Image Manipulation Program, is a wonderful software, with a lots of features that it make it the only, unique, really photoshop aternative. But if I must be honest I prefer photoshop, I think is a must.

Download Gimp

Photoshop.

The best! I know is not free, it cost much, but I can’t work without this software, is the best image authoring software, the art of the photo retouch. THe Gimp is a good alternative, but I think that, at this moment, photoshop is one of the software indispensable for every webdesigner.

Download Photoshop Trial.

Illustrator.

Illustrator is the best vector-based computer drawing tool actually. Usually I work with photoshop, and Illustrator using , at least, to make some logos or vectorial images. Well .. I must learn better this software actually I’m not using too much. Like all the adobe product, you can download the trial and try the software.

Download Illustrator Trial.

Inkscape.

Inkscape, is the illustrator free alternative, like Gimp is for photoshop, is a good solution if you can’t spend money to illustrator.

You can download directly form the website.

Download Inkscape.

Dreamweaver.

dreamweaver

Need explications? The Adobe software, the prince of web editing. I don’t use more, for 2 reasons :
1) I think that use dreamweaver is a limit when you are starting with web design, yes you can use in split mode, or only in source view, but if you are starting with the html,css and the web programming language, I suggest to use a text editor, to learn the code without use WYSIWYG.
2) The last version of Dreamweaver are too much slow!! I’ve tried the cs4 version on my macbook pro with 2G Ram and is too, too much slow!

Well this is the list of the best mac software for web editing, in my own opinion. If you want to suggest other software or you know other software feel free to suggest it using the comments!

Download here the trial of Dreamweaver.

Hasta Luego!

This posts may be interesting too

• Simple animated menu with jquery
• Myths, legends and mysteries of the absolute paths and urls

No related posts.

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