FMT2-Java script kit   ·   FMT3-Dynamic Drive
Folding menu tree, V2 - STATIC

with left border frame
opening in middle frame (page body)
top level (Menu 1, Menu 2, Menu 3) reload the same page so appears to be static

Folding Menu Tree has basic implementation instructions.

This version modifies the code to make the Menu items static - not a link

Here is the modified head & body code:
<style>
<!--
a:hover{color:red}
a{text-decoration:none}
.look{font:bold 16pt Garamond,Arial;}
.look2{font:bold 12pt Garamond,Arial;}
.folding{cursor:hand}
a:hover{color:red}
//-->
</style>

<script language="JavaScript">
<!--
//By George Chiang (www.javascriptkit.com) JavaScript site.
img1=new Image()
img1.src="^GEMDIR/fold.gif"
img2=new Image()
img2.src="^GEMDIR/open.gif"
ns6_index=0

function change(e){

if(!document.all&&!document.getElementById)
return

if (!document.all&&document.getElementById)
ns6_index=1

var source=document.getElementById&&!document.all? e.target:event.srcElement
if (source.className=="folding"){
var source2=document.getElementById&&!document.all? source.parentNode.childNodes:source.parentElement.all
if (source2[2+ns6_index].style.display=="none"){
source2[0].src="^GEMDIR/open.gif"
source2[2+ns6_index].style.display=''
}
else{
source2[0].src="^GEMDIR/fold.gif"
source2[2+ns6_index].style.display="none"
}
}
}
document.onclick=change
//-->
</script>

<div class="look"><img src="^GEMDIR/fold.gif" class="folding"><a href="javascript:location.reload()" target="TRLX_Middle">Menu 1</a>
<ul class="look2" style="list-style-image:url(^GEMDIR/list.gif);display:none">
    <li><a href="fdddf" target="TRLX_Middle" >Link 1a</a></li>
    <li><a href="fdddf" target="TRLX_Middle" >Link 1b</a></li>
    <li><a href="fdddf" target="TRLX_Middle" >Link 1c</a></li>
</ul>
</div><br>

<div class="look"><img src="^GEMDIR/fold.gif" class="folding"><a href="javascript:location.reload()" target="TRLX_Middle">Menu 2</a>
<ul class="look2" style="list-style-image:url(^GEMDIR/list.gif);display:none">
    <li><a href="fdddf" target="TRLX_Middle" >Link 2a</a></li>
    <li><a href="fdddf" target="TRLX_Middle" >Link 2b</a></li>
    <li><a href="fdddf" target="TRLX_Middle" >Link 2c</a></li>
</ul>
</div><br>

<div class="look"><img src="^GEMDIR/fold.gif" class="folding"><a href="javascript:location.reload()" target="TRLX_Middle">Menu 3</a>
<ul class="look2" style="list-style-image:url(^GEMDIR/list.gif);display:none">
    <li><a href="fdddf" target="TRLX_Middle" >Link 3a</a></li>
    <li><a href="fdddf" target="TRLX_Middle" >Link 3b</a></li>
    <li><a href="fdddf" target="TRLX_Middle" >Link 3c</a></li>
</ul>
</div>

Notes about this page:
Sample menu - links are all going to same test fdddf page!
Menu is placed in left border with gray background inside a table to align.
All links open in Middle frame (page body)