| 解 説 |
プルダウンメニューのスクリプトは複雑になってしまう場合がありますが、実際はサンプルのように２行でできます。通常はプルダウンメニューが表示されているかどうか、などをフラグ変数などで持ち、その値を切り替え／参照して処理します。しかし、現在の状態がどうなっているかをチェックして表示を切り替えれば変数も不要でスクリプトはすっきりします。表示されていればスタイルシートのvisibilityプロパティにvisible、そうでなければhiddenの文字が入っています。visibleならhiddenに、hiddenならvisibleにします。通常はif命令を使いますが、表示状態をあらかじめ配列に格納しておき状態を検索し、その結果を配列の引数とすることで短くシンプルなスクリプトとなります。
|
| コード |
<![CDATA[
<html>
<head>
<title>プルダウンメニュー（クリックタイプ）</title>
<script Language="JavaScript"><!--
vType = ["hidden","visible"];
function pdMenu(mName)
{
Menu = document.all[mName].style;
Menu.visibility = vType[Menu.visibility.indexOf("hidden") + 1];
}
// --></script>
</head>
<body>
<a href="javaScript:pdMenu('Menu1')"><img src="menu.gif"></a><br>
<div id="Menu1" style="visibility:hidden">
<a href="http://www.openspc2.org/" ><img src="sub1.gif" border="0"></a><br>
<a href="http://www.impress.co.jp/"><img src="sub2.gif" border="0"></a><br>
<a href="http://game.gr.jp/" ><img src="sub3.gif" border="0"></a><br>
</div>
</body>
</html>
]]>
|
|
■サンプルスクリプトを実行する >>実行
■各ブラウザでの動作結果を見る >>View! |
プルダウンメニュー（クリックタイプ）