Dynamic Drive DHTML Scripts- DD Tab Menu II

FF1+ IE5+ Opr7+

DD Tab Menu II

Author: Dynamic Drive

Note: Updated August 29th, 06. Overhauled CSS of image tabs for easy configuration.

Description: Similar to DD Tab Menu, this second version uses images instead for the tabs themselves. The script creates a standards compliant, 2 level tab menu (can be set to single level as well). Move your mouse over a tab, and additional content appears beneath it. It uses CSS to control all of its appearance, and plain HTML to implement the entire menu markup. Highlights of this script are:

Standards compliant, with menu tabs and sub contents defined using plain HTML, making customization a breeze.
Entire menu and its contents search engine friendly.
Set which menu tab and optional sub content should initially be shown when the page first loads.
Easily toggle between a two level (default) and single level tabs menu. For the later, the entire second level is hidden, allowing you to use this script simply as basic tab links.

Demo:

Return to the frontpage of Dynamic Drive.

See the new scripts recently added to Dynamic Drive. Click here.

Original, practical CSS codes and examples such as CSS menus for your site.

Directions

Step 1: Insert the below CSS and script into the HEAD section of your page:

Select All

<style type="text/css">

.halfmoon{
margin-bottom: 4px;
}

.halfmoon ul{
padding: 3px 9px 2px 5px;
margin-left: 0;
margin-top: 1px;
margin-bottom: 0;
font: bold 14px Verdana;
list-style-type: none;
text-align: left; /*set to left, center, or right to align the menu as desired*/
border-bottom: 1px solid #929492;
}

.halfmoon li{
display: inline;
margin: 0;
}

.halfmoon li a{
text-decoration: none;
padding: 3px 9px 2px 5px;
margin: 0;
margin-right: 0; /*distance between each tab*/
border-left: 1px solid #DDD;
color: black;
font: bold 14px Verdana;
background: #ECEEEC url(tabright.gif) top right no-repeat;
}

.halfmoon li a:visited{
color: black;
}

.halfmoon li a:hover, .halfmoon li a.current{
background-color: #CDDADA;
color: navy;
}

#tabcontentcontainer{
width:95%; /*width of 2nd level content*/
height:1.5em; /*height of 2nd level content. Set to largest's content height to avoid jittering.*/
}

.tabcontent{
display:none;
}

</style>


<script type="text/javascript">

/***********************************************
* DD Tab Menu II script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Please keep this notice intact
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

//Set tab to intially be selected when page loads:
//[which tab (1=first tab), ID of tab content to display (or "" if no corresponding tab content)]:
var initialtab=[1, "sc1"]

//Turn menu into single level image tabs (completely hides 2nd level)?
var turntosingle=0 //0 for no (default), 1 for yes

//Disable hyperlinks in 1st level tab images?
var disabletablinks=0 //0 for no (default), 1 for yes


////////Stop editting////////////////

var previoustab=""

if (turntosingle==1)
document.write('<style type="text/css">\n#tabcontentcontainer{display: none;}\n</style>')

function expandcontent(cid, aobject){
if (disabletablinks==1)
aobject.onclick=new Function("return false")
if (document.getElementById && turntosingle==0){
highlighttab(aobject)
if (previoustab!="")
document.getElementById(previoustab).style.display="none"
if (cid!=""){
document.getElementById(cid).style.display="block"
previoustab=cid
}
}
}

function highlighttab(aobject){
if (typeof tabobjlinks=="undefined")
collectddimagetabs()
for (i=0; i<tabobjlinks.length; i++)
tabobjlinks[i].className=""
aobject.className="current"
}

function collectddimagetabs(){
var tabobj=document.getElementById("ddimagetabs")
tabobjlinks=tabobj.getElementsByTagName("A")
}

function do_onload(){
collectddimagetabs()
expandcontent(initialtab[1], tabobjlinks[initialtab[0]-1])
}

if (window.addEventListener)
window.addEventListener("load", do_onload, false)
else if (window.attachEvent)
window.attachEvent("onload", do_onload)
else if (document.getElementById)
window.onload=do_onload

</script>

The CSS above allows you to control all visual aspects of the tab menu and content in one central location. Read the adjacent comments to change them. A variable within the DHTML script also allow you to configure the menu further.

Step 2: Add the below HTML to where you wish the tab menu to appear on the page:

Select All

<div id="ddimagetabs" class="halfmoon">
<ul>
<li><a href="http://www.dynamicdrive.com" onMouseover="expandcontent('sc1', this)">Home</a></li>
<li><a href="http://www.dynamicdrive.com/new.htm" onMouseover="expandcontent('sc2', this)">DHTML</a></li>
<li class="selected"><a href="http://www.dynamicdrive.com/style/" onMouseover="expandcontent('sc3', this)">CSS</a></li>
<li><a href="http://www.dynamicdrive.com/forums/">Forums</span></a></li>
<li><a href="http://tools.dynamicdrive.com/imageoptimizer/">Gif Optimizer</a></li>
</ul>
</div>

<DIV id="tabcontentcontainer">

<div id="sc1" class="tabcontent">
Return to the <a href="http://www.dynamicdrive.com">frontpage</a> of Dynamic Drive.
</div>

<div id="sc2" class="tabcontent">
See the new scripts recently added to Dynamic Drive. <a href="http://www.dynamicdrive.com/new.htm">Click here</a>.
</div>

<div id="sc3" class="tabcontent">
Original, practical <a href="http://www.dynamicdrive.com/style/">CSS codes and examples</a> such as CSS menus for your site.
</div>

</DIV>

Step 3: Finally, the script a single image for its interface (which you can change by editing the code of Step 1). Download it below:

More information

The code of Step 2 contains the plain HTML that will render the menu. Structurally it is broken up into two parts:

1) The menu tabs:

<div id="ddimagetabs" class="halfmoon">
<ul>
<li><a href="http://www.dynamicdrive.com" onMouseover="expandcontent('sc1', this)">Home</a></li>
<li><a href="http://www.dynamicdrive.com/new.htm" onMouseover="expandcontent('sc2', this)">DHTML</a></li>
<li><a href="http://www.dynamicdrive.com/style/" onMouseover="expandcontent('sc3', this)">CSS</a></li>
<li><a href="http://www.dynamicdrive.com/forums/">Forums</span></a></li>
<li><a href="http://tools.dynamicdrive.com/imageoptimizer/">Gif Optimizer</a></li>
</ul>
</div>

Each tab is implemented as a list link. Here the first 3 tabs have a sub content associated with them, which you specify by inserting the "onMouseover..." code inside the links' A tag. Read on for more info.

2) The menu contents:

Following the tabs is a DIV that contains the sub contents associated with select tabs above:

<DIV id="tabcontentcontainer">

<div id="sc1" class="tabcontent">
2nd level content 1 here.
</div>

<div id="sc2" class="tabcontent">
2nd level content 2 here.
</div>

</DIV>

Each sub content is defined by wrapping it inside a DIV with an arbitrary but unique id (ie: sc1), in which this ID should match up with that specified in the "OnMouseover..." code of the tab link above:

<div id="sc1" class="tabcontent">
2nd level content 1 here.
</div>

Note that all sub content DIVs should be defined within the master DIV with id="tabcontentcontainer".

And that's it!

Wordpress Users: Step by Step instructions to add ANY Dynamic Drive script to an entire Wordpress theme or individual Post