Modern navigation menu using HTML & CSS.

This tutorial will provide a step by step guide to creating a navigation menu using HTML & CSS. We will use photoshop to create some simple gradient images, this should make the menu more visually appealing.

If you have never worked with CSS lists before, we have a quick guide which covers the basics of the 'UL'(unordered list) - the list we will be using for this tutorial.

Check out the end product below before continuing:

Using Photoshop to create the navigation menu images.

The first thing i did when creating this navigation menu was open photoshop and design it using a few simple techniques.

Start first of all by changing the foreground color to #32343a. Now select the rectangle tool by clicking 'U'.

Create a new layer by pressing 'CTRL, SHIFT + N' simultaneously.

Left click and drag out with your mouse until you have something similar to the image below.

Now change your foreground color to #454851. Whilst holding 'CTRL' click the layer thumbnail to select the pixels in that layer.

Create a new layer and select it. Select the fill tool by pressing 'G' and fill the selection. We should now have two layers each with a rectangle in it.

Move the new layer up just slightly using the move tool(V) to reveal a small portion of the below rectangle. Call this layer 'Gradient bar'.

With the 'Gradient bar' layer selected browse to 'Layer > Layer Style > Gradient overlay'. Alter the settings to match those seen in the picture to the left.

When applied this should give the bar a gradient effect.

You can see an example of this below.

The menu so far:

We now have our background for the menu completed. Let's move on to the buttons.

Change the foreground color to #5f89b7. Select the pixels of the 'Gradient bar' layer by holding 'CTRL' and left clicking the layer thumbnail.

Create a new layer & select the Rectangular marquee tool by pressing 'M'. While holding down 'Alt' left click and drag over the selection to subtract from it.

You should be left with something similar to the image above.

Select the paint bucket tool by pressing 'G' & left click within the selection to fill it.

You should now have a blue rectangle in the new layer. Press 'CTRL + D' to deselect the current selection.

Browse to 'Layer > Layer Style > Gradient Overlay'. Apply the following settings:

While you still have the Layer style window open add a stroke effect to the layer. Use the following settings:

The color we used for the stroke is #32343a. The button should now look similar to the image below.

You can now copy and paste this layer as many times as necessary. To do this simply right click the layer and browse to 'Duplicate layer'. Alternatively you can click,drag and drop the layer onto the 'Create a new layer' button at the bottom of the 'Layers' window.

Once you have duplicated the layer select the 'Move tool'('V'), left click, hold down 'Shift' and drag the new layer in to position. Holding shift will keep the new button in-line with the other.