You have probably seen tutorials about tabbed content scripts, since they are all over the net, just go to Google and search for javascript tabbed content tutorial and you will get thousands of results. That is why I am not going to write one here, but instead just show you how it looks when applied to a css menu generated via this site.
The example uses one of the new menu styles added to the horizontal menu builder, furthermore it uses MooTools 1.11 as the javascript framework, but you can easily change this to fit your favourite framework.
The code is supplied in each tab, so you can quickly apply this to your site, by copy/pasting the code from the tabs to your own site.
Example 1
By creating a menu image where the tabs are upside down, you can easily add the tabs to the bottom of the container, as the second example shows.
Example 2
To get started with creating your own css tab menu style, go to the horizontal menu builder.
Other resources
A List Apart has a great tutorial on how to create your css tabs using the sliding doors technique. Here are the links for Part 1 and Part 2
TutorialBlog also has a list of 10 Different Ajax Tab.
At Dynamic Drive you can find many tabbed content examples along with css menus examples.
And at last, if you want a Windows XP styled tab script, you can find an excellent one over at dhtmlgoodies.com.
Update 27/09-2008
Due to the comment below, by Doug, I have made a modification to the tab script, so that if you should ever encounter similar issues, you can use the below examples for you site.
As stated in my comment below, the changes to the script are very simple to implement. In your tab links you will have to add a hash (#) before the link name and in the javascript you will need to change the last two lines in the “tabState” function from;
var ac = ael.getProperty(‘href’);
$(ac).addClass(‘active’);
to
var acu = ael.getProperty(‘href’);
var ac = acu.replace(/#/, ”);
$(ac).addClass(‘active’);
Furthermore, while trying to figure out what could have caused the issue, I encountered a variable that was not set. The scripts here have been corrected, but if you have used the script and want to correct this all you need to do, is change the following line in the “initTabs” function;
e = new Event(e).stop();
to
var e = new Event(e).stop();
But enough talk from me, I could go on all day, here are the links to the examples using the different javascript.
Example 3
Example 4
Please note that even though an issue occurred on Dougs site, I tested it in IE7 and it worked fine, the issue might have occurred due to multiple javascript not being able to play toghether.
CSS Menu Maker has been around for a long time and offers both horizontal and vertical menus along with drop down menus.
Pure CSS Menu offers an advanced menu builder, where you are able to create your own drop down menus, by selecting one of their various menu templates. Futhermore you are able to change the colors and add/remove items from your menu, all updated in realtime.
