動くメニュー

動くメニュー

ページが上から下まで長いときに
追跡してくるメニューを作る方法です。

今回は以下のようなメニューを作ります。

まずメニューを作ります。
このメニューが動くことになります。

<body> ～ </body>のどこかに記述してください。

<div id="tono001">
<br>
<table cellspacing="3">
<tr><td class="tc"><a href="http://sennbei.mond.jp/HP/">簡単！HP作成講座</a></td></tr>
<tr><td class="tc"><a href="http://www1.bbs.livedoor.com/3009007/bbs_tree">掲示板</a></td></tr>
<tr><td class="tc"><a href="soft.html">便利ソフト</a></td></tr>
<tr><td class="tc"><a href="200404.htm">日記</a></td></tr>
<tr><td class="tc"><a href="link.html">リンク</a></td></tr>
<tr><td class="tc">空き</td></tr>
</table>
</div>

<div> </div>で囲んだ範囲が動く部分になります。
いくつかスタイルを適用するため、<div>にIDを設定し、
<td>にclassを設定します。

そしてメニュー部分を記述します。
この場合はテーブルを使っていますが、
テーブルを使わなくても問題ありません。

この例ではテーブルの背景色を指定していませんが、
このままだと背景が透けてしまうので、
必要な人は背景色も指定してください。

リンクについては普通にターゲットの指定もできます。
というより、普通にHTMLを記述するだけです。

私の例ではIDはtono001に、classはtcになっていますが、
この言葉には特に意味はないので、変えることもできます。

ただし変える場合には、
スタイルシートの部分とスクリプトの部分も
同じように変えてください。

次に、先ほど設定したIDとclassにスタイルを適用するため、
<head> ～ </head>に以下のものを記述します。

<style type="text/css">

</style>

<div> </div>の位置の指定と、
テーブルのデザインだけですね。
よくみれば難しいものはないと思います。

位置の指定では右から10ピクセルになっていますが、
これは私が単に右に寄せたかったからで、
右に寄せる必要はありません。

次に、テーブルを移動させるスクリプトを記述します。
以下のように記述してください。
<body> ～ </body>のどこかに記述します。

<script language="JavaScript">
lay = document[document.all ? "all" : "layers"]["tono001"]
function ffhpaint() {
tY = (document.all ? document.body.scrollTop : window.pageYOffset);
cY = document.all ? lay.style.pixelTop : lay.top
di = cY - tY;
(di>0)?de=di:de=Math.round(di/5);
if (document.all)
lay.style.pixelTop -= de
else
lay.top -= de
}
window.setInterval("ffhpaint()",10)
</script>

以上です。

なお、出来上がったものが以下のものになります。
（解凍ソフトが必要になります。）

→　ダウンロード

メニューに戻ります。