Create a cool web 2.0 navigation bar

Today we're be designing a cool looking navigation bar and converting it into a fully functional item with HTML, CSS and JavaScript. Have a look at the demo below.

Demo (hover your mouse cursor over the buttons)

Part 1 - Design in Photoshop

We will be creating a single 100x100 pixels document that will serve us as a template for the menu items. All the icons and captions will be integrated into one image. You may use GID, PNG or even high quality JPEG images to store your menu items in. In the demo above the images are stored as high quality JPEGs and, as you can see, they look pretty good. So let's start. Create a new 100x100 px document and set the color values as shown below:

Now grab the gradient tool

from the tools palette and set it to be linear foreground-to-background:

Draw a gradient from the top of the image to the bottom while holding SHIFT to force a straight line. You should end up with an image like this:

Next, rename the layer to back or background and create a new one, named highlight. Go to Window > Info to open up an info panel. You will need this to draw a 50 pixels height rectangle. So grab the rectangular marquee tool

from the tools palette and draw a selection like shown below:

Press D and X to set the foreground color to white, make sure highlight layer is selected and ALT+BACKSPACE to fill with white:

Now set the highlight layer's opacity to about 20%. You should now have something like this:

Create a new layer above the highlight and name it icon. Find yourself a PNG or other icon (use google or simply head on to this website and choose any icon from there). Paste your icon and resize it to fit in the document. Position it on the top of the image:

Create a new layer above icon and name it text. Grab a text tool

from the tools palette and define some settings for the font. I've used the ones shown below:

Set the foreground color to black (D on your keyboard) and click somewhere in the horizontal center of the document (make sure that text layer is selected). Type in a title for this button and position the text so that it looks best for you. Set its blending mode to multiply and double-click to add the following drop shadow style:

Set the layer's fill to about 60% and you should now have something like this:

We're done with our item. Now we need to create a splitter and a hover state image. Let's start with the hover. To do this, you need to grab the gradient tool, press D to set default colors and click on the gradient selection box:

When the gradient editor dialog opens, you'll need to define a Fore-back-fore gradient. It's easy to do, just follow the steps below:

You should now have a new black-to-white-to-black gradient in your gradients list:

It's not just a black-white-black gradient, the colors will automatically change as you change the background and foreground colors. We need this gradient so that we could mask some areas of the hover image and the splitter. You'll see this gradient in use in a second. So enough preparation, go ahead and create a new layer above highlight and name it hover. Press D to reset colors and ALT+BACKSPACE to fill the entire thing with black:

It's pure black for now, but we'll fix it in a moment. And that's where our new gradient comes in: with the help of it and layer masks we're going to make the top and bottom parts of this black layer disappear. Click on a layer mask button

in the layers panel to add a mask to the hover layer. Now grab a gradient tool with your newly created preset and draw a line from top to bottom while holding SHIFT to force a straight line. The result should be as shown below:

Now we'll need to decrese the overall opacity since it's a little too dark. This part is entirely up to you. I've set the opacity to 55%:

And you have your hover image. The last thing to do is create a splitter. To do that, disable all layers, except background and highlight by clicking on the eye icons next to them. Now create a new layer on top of everything else, name it splitter and grab a pen tool

from the tools palette. Set the foreground to black (D) and draw a vertical line while holding SHIFT:

And now mask this line as you did with the hover layer: add a layer mask, select your gradient preset and draw the same vertical line on the mask. That's how your line looks now:

It's still too dark so decrease the overall opacity of the layer to something that looks good to you. Mine is 50%:

Next, grab the rectangular marquee tool

from the tools palette and draw a 1px wide selection around the splitter. You should zoom in a few times. Here's how the selection looks in a few hundred percent zoom:

Press CTRL+SHIFT+C to copy the merged result to clipboard, then CTRL+N to create a new document and CTRL+V to paste the clipboard contents onto it. If you've done everything right, your new document will be 1x100px in dimensions and will now have the splitter on it. Save this document as splitter.jpg (or any other web file format) and you can close it. Make a new selection on your old document, but this time don't intersect it with the splitter. I've even disabled the splitter layer to do this:

Once again, copy and paste it to a new document as you've just done and save the new document as loop.jpg. This will be our navigation bar background. So now we have a background, a splitter and all that's left to do is save ourselves a button itself. To do that, disable splitter and hover layers and enable all the others. Save the current document as btn1.jpg. Make sure you use 12 for the JPEG quality, because lower quality will probably look bad. You can use a PNG or GIF file instead if it looks better for you. Now enable the hover layer and save this document as btn1_h.jpg. The _h part tells us that it's a hover state image. And now you should have the following files saved in a single folder: loop.jpg, splitter.jpg, btn1.jpg, btn1_h.jpg. To add additional buttons, change the icon and the text and save both normal and hover states as you did with btn1 and btn1_h. The important thing is that the hover image must have the same name with _h appended at the end. For example about.jpg and about_h.jpg.

Part 2 - Coding the menu

Move all the images you've saved to a new folder, called images. First we'll need a navigation bar itself. It will be a 100px height DIV, defined as follows:

<div class="navbar">

</div>

The style for this navigation bar is as follows:

<style type="text/css">
.navbar {
    height: 100px;
    background: url(images/loop.jpg) repeat-x;
    margin: 0;
    padding: 0;
    text-align: center;
}
</style>

Change the value of text-align to left or right if you don't want your buttons centered. Let's add a first splitter:

<div class="navbar">
<img src="images/splitter.jpg" width="1" height="100" alt="" />
</div>

And now let's add our btn1 and another splitter:

<div class="navbar">
<img src="images/splitter.jpg" width="1" height="100" alt="" /><a href="URL GOES HERE"><img border="0" src="images/btn1.jpg" width="100" height="100" onmouseover="swapImg(this, 'images/btn1')" alt="" /></a><img src="images/splitter.jpg" width="1" height="100" alt="" />
</div>

Note that there can be no whitespace between <img> and <a> tags, because that will move our splitter away from the button. As you can see, we have an onmouseover event, that calls a swapImg function. It passes itself and an image address, without an extension to this function. And here's how the function looks like:

<script type="text/javascript">
function swapImg(pObj, pImg)
{
    pObj.src = pImg + '_h.jpg';
    pObj.onmouseout = function() {
        pObj.src = pImg + '.jpg';
    };
}
</script>

When you hover a mouse over btn1 image, this function appends an _h.jpg string to the image address and loads a hover image. It also defines the onmouseout function for the same button so that the image would change back when the mouse leaves. Below is the final result with 3 images. You should use external CSS and JS files in the real situation, however.

<html>
<head>
<style type="text/css">
.navbar {
    height: 100px;
    background: url(images/loop.jpg) repeat-x;
    margin: 0;
    padding: 0;
    text-align: center;
}
</style>
<script type="text/javascript">
function swapImg(pObj, pImg)
{
    pObj.src = pImg + '_h.jpg';
    pObj.onmouseout = function() {
        pObj.src = pImg + '.jpg';
    };
}
</script>
</head>
<body>
<div class="navbar">
<img src="images/splitter.jpg" width="1" height="100" alt="" /><a href="URL GOES HERE"><img border="0" src="images/btn1.jpg" width="100" height="100" onmouseover="swapImg(this, 'images/btn1')" alt="" /></a><img src="images/splitter.jpg" width="1" height="100" alt="" /><a href="URL 2 GOES HERE"><img border="0" src="images/btn2.jpg" width="100" height="100" onmouseover="swapImg(this, 'images/btn2')" alt="" /></a><img src="images/splitter.jpg" width="1" height="100" alt="" /><a href="URL 3 GOES HERE"><img border="0" src="images/btn3.jpg" width="100" height="100" onmouseover="swapImg(this, 'images/btn3')" alt="" /></a><img src="images/splitter.jpg" width="1" height="100" alt="" />
</div>
</body>
</html>