Easy Tabs 1.1 – free Tab Menu

The first Version of my free Tab Menu has been downloaded over 5000 times. The script was ok but far away from perfect. So i've optimized the code (as good as i could) and made a few improvements to the menu. The Menu is now called Easy Tabs 1.1 (free for private and commercial projects).

Features and Infos

• successfully tested in IE5.0, IE5.5, IE6, IE7, Firefox 2, Opera 9.2
• if Javascript is disabled - the content is now visible
• You can navigate between the tabs with the keyboard TAB Key
• you can easy define which Tab shoud be active @ start
• it's really easy now to add more tabmenus @ the same site [see the examples below]
• If you want that the tabs are changing on click and not on mouseover -> then just change the onmouseover to onclick
• Of course you can set a link to each Menu Tab - just set the linkurl in the href and delete the onclick="return false;"
• In the Examples below i've packed everything (Html, CSS, Javascript) in 1 File - but you can also put the css in an external css file and the javascript in an external javascript file. I've included one clean example in the Download Zip File.

Live Examples

Here are three basic examples:

• Example with one Tabmenu
• Example with two Tabmenus
• Example with threeTabmenus

Code Explanation

There are 4 Settings you have to set in the javascript:

//Set the id names of your tablink (without a number at the end)
var tablink_idname = new Array("tablink")

//Set the id name of your tabcontentarea (without a number at the end)
var tabcontent_idname = new Array("tabcontent")

//Set the number of your tabs
var tabcount = new Array("4")

//Set the Tab wich should load at start (In this Example:Tab 2 is visible on load)
var loadtabs = new Array("2")

If you have more than one tabmenu, just enter another value in the Arrays for Example:

//Set the id names of your tablinks (without a number at the end)
var tablink_idname = new Array("tablink","anotherlink")
//Set the id names of your tabcontentareas (without a number at the end)
var tabcontent_idname = new Array("tabcontent","anothercontent")
//Set the number of your tabs in each menu
var tabcount = new Array("4","6")
//Set the Tabs wich should load at start (In this Example:Menu 1 -> Tab 2 visible on load, Menu 2 -> Tab 5 visible on load)
var loadtabs = new Array("2","5")

For better understanding -> In the tablinks you call the easytabs function with 2 values. The first value is the Menu and the second the Tabnumber. So the easytabs call for the third tab of the first menu would be:

 onmouseover="easytabs('1', '3');"

The call for the 4 tab in the 3rd menu would be:

onmouseover="easytabs('3', '4');"

I hope this Tab Menu is useful for you, if you have questions or improvements please post a comment, thank you.

Download EasyTabs 1.1 Example Package

  Easy Tabs 1.1 (7,0 KiB, 9.954 hits)

Download EasyTabs 1.2 Example Package - New Version (Infos here)

  Easy Tabs 1.2 (9,9 KiB, 567.080 hits)

Another live Example

This Related Posts, Tags, Rating, Statistic Menu: