"Dynamic Navigation With DOM"
by Mark McManus
Web Techniques, March 1998
Web Techniques grants permission to use these listings (and code) for
private or commercial use provided that credit to Web Techniques and
the author is maintained within the comments of the source. For
questions, contact editors@web-techniques.com.
This file consists of the one listing accompanying Mark McManus'
article in Web Techniques Magazine, titled "Dynamic Navigation With
DOM".
LISTING ONE
<HTML>
<HEAD>
<TITLE>Dynamic Contents</TITLE>
<STYLE TYPE="text/css">
H1 { color:blue; font-size:18pt}
H2 { color:green; font-size:12pt }
H3 { font-size:8pt }
DIV.leveltwo { margin-left:0.5in }
DIV.levelthree { margin-left:0.5in }
</STYLE>
<SCRIPT Language="javascript">
<!--
function overHeadOne( el ){
el.style.color = "red";
el.style.textDecoration = "underline";
return;
}
function outHeadOne( el ){
el.style.color = "blue";
el.style.textDecoration = "none";
return;
}
function overHeadTwo( el ){
el.style.textDecoration = "underline";
return;
}
function outHeadTwo( el ){
el.style.textDecoration = "none";
return;
}
function closeTitle( el ){
var elParent = el.parentElement;
var numChildren = elParent.children.length;
var curChild = 0;
for( i = 0; i<numChildren; i++ ){
curChild = elParent.children(i);
if( curChild != el ){
if( curChild.style.display == "" )
curChild.style.display = "none";
else
curChild.style.display = "";
}
}
return;
}
function changeContent( cont ){
document.all.contentDIV.innerHTML = cont;
return;
}
-->
</SCRIPT>
</HEAD>
<BODY>
<DIV ID=tableCont STYLE="position:absolute; width:300">
<DIV>
<H1 onMouseOver="overHeadOne( this );"
onMouseOut="outHeadOne( this );"
onClick="closeTitle( this );">Header One ></H1>
<DIV CLASS=leveltwo STYLE="display:none">
<H2 onMouseOver="overHeadTwo( this );"
onMouseOut="outHeadTwo( this );"
onClick="closeTitle( this );">One ></H2>
<DIV CLASS=levelthree STYLE="display:none">
<H3 onMouseOver="overHeadTwo( this );"
onMouseOut="outHeadTwo( this );"
onClick="changeContent('Content for Another one');">Another
One</H3>
</DIV>
<DIV CLASS=levelthree STYLE="display:none">
<H3 onMouseOver="overHeadTwo( this );"
onMouseOut="outHeadTwo( this );"
onClick="changeContent('Content for Another two');">Another
Two</H3>
</DIV>
</DIV>
<DIV CLASS=leveltwo STYLE="display:none">
<H2 onMouseOver="overHeadTwo( this );"
onMouseOut="outHeadTwo( this );"
onClick="changeContent('Content for wo');">Two</H2>
</DIV>
</DIV>
<DIV>
<H1 onMouseOver="overHeadOne( this );"
onMouseOut="outHeadOne( this );"
onClick="closeTitle( this );">Another Heading ></H1>
<DIV CLASS=leveltwo STYLE="display:none">
<H2 onMouseOver="overHeadTwo( this );"
onMouseOut="outHeadTwo( this );"
onClick="closeTitle( this );">One ></H2>
<DIV CLASS=levelthree STYLE="display:none">
<H3 onMouseOver="overHeadTwo( this );"
onMouseOut="outHeadTwo( this );"
onClick="changeContent('Content for Another one');">Another
One</H3>
</DIV>
</DIV>
</DIV>
</DIV>
<DIV ID="contentDIV" STYLE="position:absolute; top:25; left:310; width:300">
Click on Heading with Arrows to to see subheadings,
click on headings without arrows to see content.
</DIV>
</BODY>
</HTML>