JavaScript Скрипт генерирует меню в стиле Windows - в верхней части экрана с выпадающими подменю

Начало Меню Скрипт генерирует меню в стиле Windows - в верхней части экрана с выпадающими подменю

..........

JavaScript Скрипт генерирует меню в стиле Windows - в верхней части экрана с выпадающими подменю

<style> A:hover{color:red} #divBg{position:absolute; top:0; left:0; visibility:hidden; height:50} DIV.clSub{position:relative; top:-5; font-family:arial,helvetica; font-size:12px; padding:10px; visibility:hidden; background-color:Silver; layer-background-color:Silver} </style> <script language="JavaScript1.2"> /******************************************************************************** Copyright (C) ******************************************************************************** Browsercheck:*/ ie=document.all?1:0 n=document.layers?1:0 //Do you want it to move with the page if the user scroll the page? var moveOnScroll=true //Do you want to hide all the other submenus when you click a new? var hideAll=true /******************************************************************************** If you want to change the appearans on the text, or background or anything do that in the style tag above, or in the table tag below. NOTE: This menu have some "small" bugs. In Netscape the links in the submenus will work even though the submenus are hidden, this has something to do with a lousy implementation of the relative positioning in Netscape. In IE links "underneath" the submenus will not work even though the submenus are hidden. I will look into this and might find a fix for it. ********************************************************************************/ /******************************************************************************** Object constructor ********************************************************************************/ function makeMenuBar(obj,nest,vis){ nest=(!nest) ? '':'document.'+nest+'.' this.css=(n) ? eval(nest+'document.'+obj):eval(obj+'.style') this.hideIt=b_hideIt; this.showIt=b_showIt; this.vis=b_vis if(ie && vis) this.css.visibility='hidden' this.state=1 this.go=0 this.height=n?this.css.document.height:eval(obj+'.offsetHeight') this.top=b_gettop this.obj = obj + "Object"; eval(this.obj + "=this") } //Get's the top position. function b_gettop(){ var gleft=(n) ? eval(this.css.top):eval(this.css.pixelTop); return gleft; } //The functions for showing and hiding 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; } /******************************************************************************** Checking if the page is scrolled, if it is move the menu after ********************************************************************************/ function checkScrolled(){ if(!oMenu.go)oMenu.css.top=(!oMenu.state)?eval(scrolled):eval(scrolled) if(n) setTimeout('checkScrolled()',30) } /******************************************************************************** Inits the page, makes the menu object, moves it to the right place, show it.. ********************************************************************************/ function menuBarInit(){ oSub=new Array() //Change it here if you want more or less submenus. oSub[0]=new makeMenuBar('divSub0','divBg',1) oSub[1]=new makeMenuBar('divSub1','divBg',1) oSub[2]=new makeMenuBar('divSub2','divBg',1) oSub[3]=new makeMenuBar('divSub3','divBg',1) oSub[4]=new makeMenuBar('divSub4','divBg',1) //Moving menuBar oMenu=new makeMenuBar('divBg') scrolled=n?"window.pageYOffset":"document.body.scrollTop" oMenu.css.top=eval(scrolled) oMenu.css.visibility='visible' if(moveOnScroll) ie?window.onscroll=checkScrolled:checkScrolled(); } /******************************************************************************** Shows and hides the submenus ********************************************************************************/ function extract(num){ if(hideAll){ for(i=0;i<oSub.length;i++){ if(num!=i) oSub[i].hideIt() } } !oSub[num].vis()?oSub[num].hideIt():oSub[num].showIt(); } onload=menuBarInit; </script> <div id="divBg"> <table width="102%" border="0" cellspacing="0" cellpadding="5" align="CENTER" valign="MIDDLE"> <tr bgcolor="#C0C0C0"> <td height="30"><a href="#" onclick="extract(0); return false">Choice 1</a></td> <td><a href="#" onclick="extract(1); return false">Choice 2</a></td> <td><a href="#" onclick="extract(2); return false">Choice 3</a></td> <td><a href="#" onclick="extract(3); return false">Choice 4</a></td> <td><a href="#" onclick="extract(4); return false">Choice 5</a></td> </tr>  <tr> <td valign="TOP"> <div id="divSub0" class="clSub">  <a href="#">Sub choice 1</a> <br> <a href="#">Sub choice 2</a><br> <a href="#">Sub choice 3</a><br> <a href="#">Sub choice 4</a><br> <a href="#">Sub choice 5</a> </div> </td> <td valign="TOP"> <div id="divSub1" class="clSub"> <a href="#">Sub choice 1</a> <br> <a href="#">Sub choice 2</a><br> <a href="#">Sub choice 3</a> </div> </td> <td valign="TOP"> <div id="divSub2" class="clSub"> <a href="#">Sub choice 1</a> <br> <a href="#">Sub choice 2</a> </div> </td> <td valign="TOP"> <div id="divSub3" class="clSub"> <a href="#">Sub choice 1</a> <br> <a href="#">Sub choice 2</a><br> <a href="#">Sub choice 3</a><br> <a href="#">Sub choice 4</a><br> <a href="#">Sub choice 5</a> </div> </td> <td valign="TOP"> <div id="divSub4" class="clSub"> <a href="#">Sub choice 1</a> <br> <a href="#">Sub choice 2</a><br> <a href="#">Sub choice 3</a><br> <a href="#">Sub choice 4</a> </div> </td> </tr> </table> </div>

Choice 1	Choice 2	Choice 3	Choice 4	Choice 5
Sub choice 1 Sub choice 2 Sub choice 3 Sub choice 4 Sub choice 5	Sub choice 1 Sub choice 2 Sub choice 3	Sub choice 1 Sub choice 2	Sub choice 1 Sub choice 2 Sub choice 3 Sub choice 4 Sub choice 5	Sub choice 1 Sub choice 2 Sub choice 3 Sub choice 4