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.

The are is a tipical graphic elements of the web 2.0, a lots of site use the badge. Usually I see that are used a lots in the Header of the pages, some in the logos, with reflection text, anyway, this give to your website a little touch of 2.0.

If you don’t want to make your own badge but you want something like “download and use”, you can download a fantastic badge sets, psd source included, from Dezinerfolio, a great blog with a lots of free resource, one of my favorite blog.

Open Photoshop and create a a new document 300*300 px with blank background.

From the Tools Palette, choose the Polygon tool, and use these settings :

badge 2.0

Now draw the badge usig #dc0b0b like first color now you have this :

badge

Now go to blending options (right click on the layer in the layers window) and use these settings :

Drop shadow opacity 50% , distance 5 spread 0 size 15

Bevel and emboss size 2 soften 0 direction up

stroke size 5 position inside color #FFFFFF

And this should the result :

badge settings

Now we need to create the blur on the top of the badge. With the elliptical marquee tool, make a selection in the top left corner of the badge and create a new layer from the layer menu :

Switch the main color to white and select the gradient tools and from the gradient color menu choose foreground to transparent and trace a line from the top left corner to the bottom right corner of the badge, after deselect all, ctrl +d and apple+d in mac, go to the layers window and low the opacity to 35% and fill to 75%, this should be the results :

badge

Finally you can personalize the badge on your way :

badge 2.0 with photoshop

Enjoy!

This posts may be interesting too

• Create a fire text with Photoshop
• Text reflection with photoshop
• Rain effect with photoshop in 6 steps
• How to send a mail with php ajax and jquery in facebook style
• Simple animated menu with jquery

No related posts.

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

Write your text using white color for the text.

text on fire

Now duplicate the text layer from the menu layer – duplicate layer. Now go on the level window and deselect the original layer, so we can see only the new duplicated layer, like this :

hide original text layer

Now go on layer menu and select : merge visible, so we will have only two layers, the original text and another layer from the background and the copied layer, this last is the layer were we will work on.

merge visible layer

Now rotate the canvas using the menu : Image – image rotation – 90 º CCW.

rotate canvas

Now is time to use the Photoshop filters. Go to Filter -Stylize – Wind and apply this settings :

wind filter photoshop

Reapply the filter another 2 times, with ctrl+f or command +f if you are using a Mac, until you will have an image like this :

the wind filter

Now rotate again the image, on 90º CW to reput the text on original position and apply the Filter blur – Gaussian blur with a radius of 1.5, or more it depend how do you want the fire effect), here the settings of the blur filter :

blur filter settings

Apply this filter another time and we have this image :

blur filter photoshop

Now it’s coming the more personalized part .. So we’re going to use the liquify Filter, the results depend on your “hands” , this effect is to make the Flames, so use the filter at better, you can learn something about this filter at this links. This is my image with the flames.

flames

Now go to the menu : image – Hue/Saturation and apply this settings (remember to click on colorize):

hue settings

The results will be something like this :

text fire hue settings

Now duplicate the level and , in the new level, reapply the HUE/SATURATION but this time without click on colorize and use these settings :

hue/saturation

Now with this new level selected go in the window levels and choose , from the select menu,Color Dodge (always with the background copy selected).

merge levels

You will have an images like this

fire

Now show the original text layer, and go to blending options ( right click directly form the layer window and choose blending options), and apply a gradient (I’ve used grey to black) and outer glow and inner glow, better if you use yellow like color for this last inner and outglow. Finally you will have something like this :

fire text photoshop

And this is the fire text!

But we can do something better now. We can make this text more web 2.0, adding some nice effect used today in web 2.0.

For example a reflection and create something like this :

fire text 2.0

On the next tutorial I will explain how to create this reflection effects.

Hasta Luego!

This posts may be interesting too

• Create a badge 2.0 with Photoshop
• Text reflection with photoshop
• Rain effect with photoshop in 6 steps
• How to send a mail with php ajax and jquery in facebook style
• Simple animated menu with jquery

No related posts.

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

I want to start with a simple tutorial for Photoshop, how to manipulate the weather and add rain to a sunny day on the beach.
So… Let’s start with my first post on lastwebdesigner.com.
This is a simple tutorial on how to make a rain effect on a photo, in 6 simple step, using Photoshop.
First of all, we need a Photo to use and modify, I’ve used this :

rain effect photoshop

Open this photo with photoshop.

1. Create a new layer : Menu layer -> new layer from the menu :

Create a new layer with Photoshop

2. Filter – Render – Clouds

Add clouds filter

3. Change the opacity to 65%.

Low the opacity level

4. Filter – Noise – Add noise, using this parameters :

add noise filter

5. Filter – blur – motion blur and use this settings :

add motion blur filter

6. Finally, from the select menu on the left of the levels window choose “overlay”.

rain effect photoshop

This posts may be interesting too

• Create a badge 2.0 with Photoshop
• Create a fire text with Photoshop
• Simple animated menu with jquery
• Text reflection with photoshop

No related posts.

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