Cross browser CSS3 drop-down navigation menu.

This tutorial will show you how to create a browser compatible navigation menu using HTML and CSS3. The navigation will be built using our drop-down menu template.

On that note i would like to mention that the primary purpose of this tutorial is to show how the template can and should be used. If you are looking for a tutorial showing each and every step of the drop-down process you may want to look elsewhere.

The navigation menu has been testing in IE7+, Firefox 3.6+, Chrome, Opera and Safari.

Demo: CSS3 navigation menu

Step 1 – Download required files for navigation menu.

Below are all the files required for this tutorial.

1a – The CSS3 navigation menu template.

First of all you will need our drop-down menu template, you can download the template below.

Browser compatible drop-down navigation menu template.

1b – PIE.htc and required images.

Just so you know, PIE.htc allows Internet explorer 6-8 render CSS3 properties. You should extract it to the same directory as your CSS file. The two images are simply background images, save them in a folder named ‘Images’. Use the link below to download these files.

PIE.htc and required images.

If you would like to know more about ‘PIE.htc’, go ahead and visit www.css3pie.com. There is some good information on there and its worth a look!

1c – Extract.

Extract the navigation template files first of all. Then, as mentioned above, extract the pie.htc file into the same folder as your css file and extract the images into an ‘images’ folder.

Step 2 – Edit the CSS.

Open the CSS file ready for editing. The first thing you will need to change is the background styling of the menu, this is applied to the ‘UL’ element and has an ID of ‘#navMain’.

Below is the current code, followed by the new code. We will use this format throughout the tutorial.

Old code:

New Code:

Whats changed:

First of all  the bottom-border has been removed and the color has been changed. Once we add a shadow we will no longer require a bottom border, and it can sometimes have a negative effect on the way the drop-down menu works – so for that reason i find it better to just remove it(in this case).

Secondly we have changed the background to use the image provided, no explanation required there. Finally an inner glow has been added using the box-shadow property. By using the ‘inset’ keyword the shadow will be added inside the element, rather than outside.

Box shadow accepts 5 values, the following should give you a better idea of how the box-shadow property works:

box-shadow: Horizontal offset, Vertical offset, Blur radius, Spread, colour.

As a final note, the behaviour property allows us to attach a script to a CSS selector. You can read more about it at www.css3.com.

Step 2.1 – CSS: Container

The next step is to add an outer shadow, you will need to add this to the wrapper ‘DIV’(#container) since you have already added a shadow to the ‘UL’ element.

Old Code:

New Code:

Whats changed:

Nothing much, a subtle border has been added to the bottom and left hand sides of the menu.

Step 2.2 – CSS: List items

The list items are to be updated next. The current item class will have a different background, borders will be added, text color changed etc.

Old code:

New code:

Whats changed:

First of all, two borders have been added. One to the list item(light), and one to the anchor(dark). This gives a nice, realistic lighting effect and fits perfectly on a navigation menu such as this.

The text has an embossed effect which is added using the text-shadow property. The code for this property is similar to that of the box-shadow property, a brief explanation can be found below.

box-shadow: Horizontal offset, Vertical offset, Blur radius, color.

Some other minor changes have been made, such as increasing the padding both vertically and horizontally. Also, the font size has been notched up a little and the color has been changed.

Finally, the background of the current list item has been changed to use the image which you should have downloaded earlier.

Step 2.3 – CSS: Drop-down menu

The following changes will be pretty much finish the navigation menu off. The styling of the dropdown menu will be changed and the positioning will need adjusting slightly.

Old code:

New code:

Whats changed:

The majority of the changes are purely cosmetic. The background color has changed, along with the font and borders. The most important changes though are to the positioning. Using the ‘top’ property the dropdown list has been properly positioned to meet the increased padding of the menu.

You may also have noticed the the ‘.gecko’ and ‘.ff3_6′ rules have been removed. These are browser specific rules for the old navigation menu and are no longer required.

Step 3 – Finish up!

The navigation menu should be pretty much complete now, you may notice that the hover colors are still off. The hover effect is handled by a jquery script, you can change these in your HTML document.

Old code:

New code:

Whats changed:

Simple hex color code change, no explanation required.

Hopefully that was easy enough to follow and you now have a good idea how fast, and easy, it is to create a dropdown navigation menu using our template. Thanks for reading.