Hey all, I have created a few more menus for you to download and use in your projects. If you would like to learn how to create these menus yourself you can refer to my recent tutorial here.

I have included the .psd, HTML & CSS files within each download to make it easier. Remember, if you use them in a project i would like to hear about it….That’s why i have a comment box (more…)

In this tutorial I am going to explain how to create a sliding door navigation menu using only CSS. When you have finished the tutorial you will finish with something like this.

you will notice that when you hover over any of the links in the example the button state changes to reflect it and it seems as if only one image is used. This is not the case!! Sliding door menus use two images , one for the left and one for the right. I am also implementing my CSS menu trick so we use only one image for the left hover and link state and likewise for the right reducing flicker and making the script lighter.

The source files for this tutorial are included and the menu has been tested in IE6, IE7, Firefox & Safari (Windows). Onward bound… (more…)

This is my first tutorial and the subject is rollover image tabs using only CSS. This is the method i use for my sites navigation here.

There will be a few steps covered but i will try to explain it as simple as i can

Step 1 – The Image

First we need to open Photoshop or the graphics program of your choice and create an image 110px x 80px. This is to be the only image we will use for our navigation. Notice how I have both of the buttons (normal state & hover state) in the one image.

Step 2 – The XHTML

Now its time to fire up your coding program, In my case it is Dreamweaver. Create a new html document and name it navbar.html then save the file.

(more…)