To navigate our pages we need to style the menu, there are three types of menu we could use, All Images, No Images, Text and Images, we will look at two of these, the first one will be All Images this is the most simple, we just create a chop images to make our menu.

For this example we just visited one of the photo stock images websites and for a couple of dollars we have a licence to use the image in our template, we cannot re-distribute the image but under the license we can use it in our own or our customers template.

Here is a comp of the image we purchased, notice the watermark, when we purchased the license, the watermark is removed, there is a link to the image below.

Four Puppies from Istock

We open the image in a graphics program sized it to fit the template and chopped it into four, the height we finished with was adjusted later to 170px, then from our Menu Options, here we just need to update three values, Height, Type and Align.

We uploaded our four images to the images folder, and next we assign them to the menu items.

We also added 4px of Menu Padding, that is all we need to do for an All Image menu, simple as that and each image links to a page section.

Enough of the fun stuff how about a normal menu, we edited some graphics from an Artisteer theme, creating a menu bar background 520px * 40px and a hover image 28px * 1px.

Notice the different values, the type is now text-images our heights are used to set the height, and we are aligning the text to the center of each menu item

We set our navigation menu image, in the now familiar background settings.

Now we add an optional 6px of padding, this will move our menu items down.

As our menu background is dark we change our font color, we also style the font here.

Final setting is the hover image, this is 1px wide so we repeat-x

That is our menu sorted!