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>