Menu 1

choice 0

Sub
Sub
Sub
Sub
Sub
Sub
Sub
Sub
Sub

choice 1

Sub
Sub
Sub
Sub
Sub
Sub
Sub

choice 2

Sub
Sub
Sub
Sub
Sub
Sub
Sub
Sub

choice 3

Sub
Sub
Sub
Sub
Sub
Sub
Sub

choice 4

Sub
Sub
Sub
Sub
Sub
Sub
Sub
Sub
Sub
Sub

choice 5

Sub
Sub
Sub
Sub
Sub
Sub
Sub

<HTML> <HEAD><TITLE>Menu 1</TITLE> </HEAD> <BODY> <FONT FACE="MS Sans serif,Tahoma,Helvetica" SIZE="2"> <style>  </style> <script language="JavaScript"> /************************************************************************************ This script is a "foldout" menu script, all the "foldouts" will stay outfolded in older browsers. To change where the menu appears change the left and top values of the divCont in the stylesheets, it's currently placed relative so you can place this menu in tables or similar if you want. Change the text colors and size in the A.clMain and A.clSubb classes. ************************************************************************************/ /************************************************************************************ Change this to false if you want all the submenus to get unfold when you foldout a new one. ************************************************************************************/ var stayFolded=false /************************************************************************************ Browsercheck ************************************************************************************/ var n = (document.layers) ? 1:0; var ie = (document.all) ? 1:0; var browser=((n || ie) && parseInt(navigator.appVersion)>=4) /************************************************************************************ Making cross-browser objects ************************************************************************************/ function makeMenu(obj,nest){ nest=(!nest) ? '':'document.'+nest+'.' this.css=(n) ? eval(nest+'document.'+obj):eval('document.all.'+obj+'.style') this.ref=(n) ? eval(nest+'document.'+obj+'.document'):eval('document'); this.height=n?this.ref.height:eval(obj+'.offsetHeight') this.x=(n)? this.css.left:this.css.pixelLeft;this.y=(n)? this.css.top:this.css.pixelTop; this.hideIt=b_hideIt; this.showIt=b_showIt; this.vis=b_vis; this.moveIt=b_moveIt return this } function b_showIt(){this.css.visibility="visible"} function b_hideIt(){this.css.visibility="hidden"} function b_vis(){if(this.css.visibility=="hidden" || this.css.visibility=="hide") return true;} function b_moveIt(x,y){this.x=x; this.y=y; this.css.left=this.x; this.css.top=this.y} /************************************************************************************ Initiating the page. Just add to the arrays here to get more menuitems and add divs in the page ************************************************************************************/ function init(){ oTop=new Array() oTop[0]=new makeMenu('divTop1','divCont') oTop[1]=new makeMenu('divTop2','divCont') oTop[2]=new makeMenu('divTop3','divCont') oTop[3]=new makeMenu('divTop4','divCont') oTop[4]=new makeMenu('divTop5','divCont') oTop[5]=new makeMenu('divTop6','divCont') oSub=new Array() oSub[0]=new makeMenu('divSub1','divCont.document.divTop1') oSub[1]=new makeMenu('divSub2','divCont.document.divTop2') oSub[2]=new makeMenu('divSub3','divCont.document.divTop3') oSub[3]=new makeMenu('divSub4','divCont.document.divTop4') oSub[4]=new makeMenu('divSub5','divCont.document.divTop5') oSub[5]=new makeMenu('divSub6','divCont.document.divTop6') for(i=0;i<oSub.length;i++){ oSub[i].hideIt() } for(i=1;i<oTop.length;i++){ oTop[i].moveIt(0,oTop[i-1].y+oTop[i-1].height) } } /************************************************************************************ This is the function that changes the sub menus to folded or unfolded state. ************************************************************************************/ function menu(num){ if(browser){ if(!stayFolded){ for(i=0;i<oSub.length;i++){ if(i!=num) oSub[i].hideIt() } for(i=1;i<oTop.length;i++){ oTop[i].moveIt(0,oTop[i-1].y+oTop[i-1].height) } } oSub[num].vis()?oSub[num].showIt():oSub[num].hideIt() for(i=1;i<oTop.length;i++){ if(!oSub[i-1].vis()) oTop[i].moveIt(0,oTop[i-1].y+oTop[i-1].height+oSub[i-1].height) else oTop[i].moveIt(0,oTop[i-1].y+oTop[i-1].height) } } } //Initiating the menus onload. if(browser) onload=init; </script>  <div id="divCont"> <div id="divTop1" class="clTop"><a href="#" onclick="menu(0); return false" class="clMain">choice 0</a><br> <div id="divSub1" class="clSub"> <a href="#" class="clSubb">Sub</a><br> <a href="#" class="clSubb">Sub</a><br> <a href="#" class="clSubb">Sub</a><br> <a href="#" class="clSubb">Sub</a><br> <a href="#" class="clSubb">Sub</a><br> <a href="#" class="clSubb">Sub</a><br> <a href="#" class="clSubb">Sub</a><br> <a href="#" class="clSubb">Sub</a><br> <a href="#" class="clSubb">Sub</a><br> </div><br> </div> <div id="divTop2" class="clTop"><a href="#" onclick="menu(1); return false" class="clMain">choice 1</a><br> <div id="divSub2" class="clSub"> <a href="#" class="clSubb">Sub</a><br> <a href="#" class="clSubb">Sub</a><br> <a href="#" class="clSubb">Sub</a><br> <a href="#" class="clSubb">Sub</a><br> <a href="#" class="clSubb">Sub</a><br> <a href="#" class="clSubb">Sub</a><br> <a href="#" class="clSubb">Sub</a><br> </div><br> </div> <div id="divTop3" class="clTop"><a href="#" onclick="menu(2); return false" class="clMain">choice 2</a><br> <div id="divSub3" class="clSub"> <a href="#" class="clSubb">Sub</a><br> <a href="#" class="clSubb">Sub</a><br> <a href="#" class="clSubb">Sub</a><br> <a href="#" class="clSubb">Sub</a><br> <a href="#" class="clSubb">Sub</a><br> <a href="#" class="clSubb">Sub</a><br> <a href="#" class="clSubb">Sub</a><br> <a href="#" class="clSubb">Sub</a><br> </div><br> </div> <div id="divTop4" class="clTop"><a href="" onclick="menu(3); return false" class="clMain">choice 3</a><br> <div id="divSub4" class="clSub"> <a href="#" class="clSubb">Sub</a><br> <a href="#" class="clSubb">Sub</a><br> <a href="#" class="clSubb">Sub</a><br> <a href="#" class="clSubb">Sub</a><br> <a href="#" class="clSubb">Sub</a><br> <a href="#" class="clSubb">Sub</a><br> <a href="#" class="clSubb">Sub</a><br> </div><br> </div> <div id="divTop5" class="clTop"><a href="" onclick="menu(4); return false" class="clMain">choice 4</a><br> <div id="divSub5" class="clSub"> <a href="#" class="clSubb">Sub</a><br> <a href="#" class="clSubb">Sub</a><br> <a href="#" class="clSubb">Sub</a><br> <a href="#" class="clSubb">Sub</a><br> <a href="#" class="clSubb">Sub</a><br> <a href="#" class="clSubb">Sub</a><br> <a href="#" class="clSubb">Sub</a><br> <a href="#" class="clSubb">Sub</a><br> <a href="#" class="clSubb">Sub</a><br> <a href="#" class="clSubb">Sub</a><br> </div><br> </div> <div id="divTop6" class="clTop"><a href="" onclick="menu(5); return false" class="clMain">choice 5</a><br> <div id="divSub6" class="clSub"> <a href="#" class="clSubb">Sub</a><br> <a href="#" class="clSubb">Sub</a><br> <a href="#" class="clSubb">Sub</a><br> <a href="#" class="clSubb">Sub</a><br> <a href="#" class="clSubb">Sub</a><br> <a href="#" class="clSubb">Sub</a><br> <a href="#" class="clSubb">Sub</a><br> </div><br> </div> <P> </BODY> </HTML>