Home Menu and Navigation DD Tab Menu II Developer's View
<html>
<head>
<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>
</head>
<body>
<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>
</body>
</html>