【 編集説明 】
● index.html
１. <head>〜</head>の間に
<link rel="stylesheet" href="./menup.css" type="text/css">
<script language="JavaScript1.2" src="./menup_write.js"></script>
<script language="JavaScript1.2" src="./menup_obj.js"></script>
を記述する。
２. メニュー表示/非表示リンク
・表示
<a href="javascript:OpenCheck(1)">MANU1</a>
「(1)」の「1」がメニュー番号となります。
・非表示(閉じる)
<a href="javascript:OpenCheck('null')">
()内には「null」を指定。
※ サンプルでは、ブラウザの上と左のマージン値が 0値用となっていますが、マージン値がある場合、
下記のように position (absolute か relative で親ボックス指定)
と overflow ( hidden ではみだしを隠す ) を指定して下さい。
<table width=500 height=20 cellspacing=0 cellpadding=0 border=0 bgcolor="#EEEEDD"
style="font-size: 14px;
position: relative; overflow: hidden;">
● menup.css
1 「#menu1」の「1」は上記同様メニュー番号となります。
2 「top:20px; left:-500px;」は、移動開始前の位置となります。
( menup_obj.js 「var sX = -500;」ここの設定と同じにします。)
3 「width:500; height:20px;」は、表示領域の指定となります。
4 「z-index:1」は、重ね順となりますので、特に変更の必要なし。
5 「visibility:hidden」は、移動開始前は隠す様に設定。
6 メニューを増やす場合は、以下「#menu6」「#menu7」と増やす。
( 又 menup_obj.js 「var idC = 5;」ここの設定にてメニュー数を変更。)
● menup_write.js
１. 「<SPAN ID="menu1">」の「1」は上記同様メニュー番号となります。
( menup.cssでの「menu1」の設定を参照する事になるので、ここでのIDの指定「menu1」は同じにする。)
※ このファイルは、JavaScriptにより書き込みを行う為で、直接HTEMに通常記述でも良い。
-------------------------------------------
<SPAN ID="menu1">
<table width=500 height=20 cellspacing=0 cellpadding=0 border=0 bgcolor="#EEEEDD"
style="font-size: 14px;">
<tr align=center>
<td width=100>Menu1 ≫≫≫</td>
<td width=100><a href="./menu1a.html" target="_blank">M1-A</a></td>
<td width=100><a href="./menu1b.html" target="_blank">M1-B</a></td>
<td width=100> </td>
<td width=100> </td>
</tr>
</table>
</SPAN>
-------------------------------------------
２. メニューを増やす場合は、以下「ID="menu6"」「ID="menu7"」と増やす。
