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…)