JavaScript/CSS Tab Menu with Sub-Navigation

In this instructable, I'll show you step-by-step how to create a JavaScript/CSS based tab menu with a rollover effect and a changing sub-navigation menu. Some basic JavaScript ans CSS knowledge is helpful, but not required, since I'll provide all the code.

This code has been tested in FireFox ans IE6/7. I haven't had the opportunity to test it on a Mac, but it should work fine.

What you need:
- A graphics editor (Photoshop, The GIMP, Pain Shop Pro, whatever)
- A text editor (like Crimson Editor or Notepad)
- Caffeine (optional)

Step 1: Making The Images

First, we need to decide on the style for our menu and create the images accordingly. I'm not going to go into a lot of detail on this, since the real magic behind the menu is in the code and not the graphics, but we will need a few basic images to help tidy up the appearance of our menu (though you could technically skip this step and use solid colors in your CSS).

subnav_bg.jpg
This is the background image for our sub-nav menu (the bar directly below the tabs). The only technical requirement here is that the image be 25px in height, in order to work with the CSS I'm supplying.

subnav_separator.jpg
This small image is essentially just a 1-2px wide vertical line, again, 25px in height, that will serve as a separator between our sub-nav elements. Hint: Make the image 2px side and use a light line next to a dark line to create a beveled look.

tab_bg.jpg
This is the background image for our main menu tabs. My tabs are 90px wide and 29px high (oops.... I was off by one).

Of course, if you don't feel like making your own images, you can always grab these....

Comments

[Jessica45]

Kelli, I was trying to re-create it and the sub-menu part doesn't work. The only thing that was strange - CSS doesn't have a style for ID aboutNav and workNav. Still it should work, but.... Give me a hint where I should look.... Thanks!

[hihihiflcl81pig]

I love you! I've been trying to work out a menu like this for some time now. Thank you so much!

[sardines454]

Very Nice work, I give you a plus!

[jesterday]

Cool, very useful for us web design noobz.....I hate that word....but I had to use it once in my life!