TOP /すぐに使えるJavaScript フローティングメニュー

<style type=text/css><!--
/*メインメニューのスタイル*/
.Mmenu{
  width:100;
  border: 1px solid gray;
  font: bold 12pt Times New Roman;
  background-color: #ccccff;
  filter: Alpha(opacity=80);
}
/*メインメニューのスタイル(展開時)*/
.MmenuC{
  width:100;
  border: 1px solid gray;
  background-color:gray;
  color:#ffffff;
  filter: Alpha(opacity=80);
}
/*メインメニューのスタイル(リンク無し時)*/
.MmenuN{
  width:100;
  border: 1px solid gray;
  background-color: #ccccff;
  filter: Alpha(opacity=80);
}
/*サブメニューのスタイル*/
.Smenu{
  width:100;
  border: 1px solid blue;
  background-color: #ccccff;
  font-size: 10pt;
  text-indent:4px;
  filter: Alpha(opacity=80);
}
/*サブメニューリンクのスタイル*/
.Smenu A:hover{
  width:100%;color:#ffffff;background-color:#6688ff;
}
/*メインメニューリンクのスタイル*/
.Mmenu A:hover{
  width:100%;color:#ffffff;background-color:#6688ff;
}
.Mmenu A{text-decoration:none;}
.Smenu A{text-decoration:none;}
--></style>
<script language="JavaScript"><!--
main_manu=new Array();
  /*メニューリンク設定*/
main_manu[0]=new Array();
main_manu[0][0]="MAINリンク1";
main_manu[0][1]=["1SUBリンク1","#101"];     //#101はリンク先アドレス
main_manu[0][2]=["1SUBリンク2","#102"];
main_manu[0][3]=["1SUBリンク3","#103"];

main_manu[1]=new Array();
main_manu[1][0]="MAINリンク2";
main_manu[1][1]=["2SUBリンク1","#201"];
main_manu[1][2]=["2SUBリンク2","#202"];
main_manu[1][3]=["2SUBリンク3","#203"];
main_manu[1][4]=["2SUBリンク4",""];
main_manu[1][5]=["2SUBリンク5",""];           //リンク無し

main_manu[2]=["MAINリンク3","#300"];          //子メニュー無し

main_manu[3]=new Array();
main_manu[3][0]="MAINリンク4";
main_manu[3][1]=["4SUBリンク1","#401"];
main_manu[3][2]=["4SUBリンク2","#402"];
main_manu[3][3]=["4SUBリンク3","#403"];

main_manu[4]=new Array();
main_manu[4][0]="MAINリンク5";
main_manu[4][1]=["5SUBリンク1","#501"];
main_manu[4][2]=["5SUBリンク2","#502"];
main_manu[4][3]=["5SUBリンク3","#503"];
main_manu[4][4]=["5SUBリンク4","#504"];
main_manu[4][5]=["5SUBリンク5","#505"];
main_manu[4][6]=["5SUBリンク6","#506"];
main_manu[4][7]=["5SUBリンク7","#507"];

main_manu[5]=["MAINリンク6",""];                //子メニュー無しリンク無し

//main_manu[整数連番]でメインメニューを増やしてください
  /*メニューリンク設定終わり*/

Menutop=50;         //表示位置(上から)
Menuleft=10;        //表示位置(左から)
basew=212;          //メインメニュー幅とサブメニュー幅の合計+12

//--------------------設定ここまで--------------------------------------------
document.write("<div id='floatMenu'style='top:"+Menutop+";left:"+Menuleft+";width:"+basew+"px;position:absolute;z-index:2;'><table style='border-collapse : collapse;'>")
subc=0;rowc=0;rowt=0;rowcell=-1;var setclose,setopen;
subtemp=-1;
for(i in main_manu)
if(subc < main_manu[i].length)subc=main_manu[i].length;
rowc=(subc < main_manu.length)?main_manu.length:subc;

for(i=0;i<rowc-1;i++){
  if(main_manu[i]){
if(main_manu[i][1][0] && main_manu[i][1][0]!="#"){
document.write("<tr><td class='Mmenu'id='Main"+i+"'onClick='subopen("+i+")'style='cursor:e-resize'>"+main_manu[i][0]+"</td><td style='background-color:#000000;'>")}
else if(main_manu[i][1]){document.write("<tr><td class='Mmenu'colspan=2><a href='"+main_manu[i][1]+"'>"+main_manu[i][0]+"</a>");}
else{document.write("<tr><td class='MmenuN'colspan=2>"+main_manu[i][0]);}
  }else{document.write("<tr><td colspan=2>");}
document.write("</td><td id='sub"+i+"'></td></tr>")}
document.write("</table></div>");

function subopen(subno){
if(rowcell!=-1)return;
(rowc<(subno+main_manu[subno].length))?rowt=rowc-main_manu[subno].length:rowt=subno;
rowcell=rowc-1
sclose(subno);
}

function sclose(subno){
if(subtemp!=-1)document.getElementById("Main"+subtemp).className="Mmenu";
document.getElementById("sub"+(rowcell-1)).innerHTML="";
document.getElementById("sub"+(rowcell-1)).className=""
rowcell--;
if(rowcell>0){setclose=setTimeout("sclose("+subno+")", 50);}
else if(subtemp!=subno){rowcell=1;sopen(subno)}
else{subtemp=-1;rowcell=-1;}
}

function sopen(subno){
document.getElementById("Main"+subno).className="MmenuC";
if(main_manu[subno][rowcell][1])
document.getElementById("sub"+rowt).innerHTML="<a href='"+main_manu[subno][rowcell][1]+"'>"+main_manu[subno][rowcell][0]+"</a>";
else
document.getElementById("sub"+rowt).innerHTML=main_manu[subno][rowcell][0];
document.getElementById("sub"+rowt).className="Smenu";
rowcell++;rowt++;
if(rowcell< main_manu[subno].length){setopen=setTimeout("sopen("+subno+")", 200);}
else{rowcell=-1;subtemp=subno;}
}
Menuobj=(document.all)?document.all("floatMenu").style:document.getElementById("floatMenu").style;

function Menuposition(){
if(document.all){
Menuobj.top=document.body.scrollTop+Menutop;
}else{
Menuobj.top=pageYOffset+Menutop+"px";
}}
(document.all)?onscroll = Menuposition : setInterval('Menuposition()',100);
/*himajin.moo.jp*/
// --></script>