| ポイント |
<![CDATA[
menuList = ["pdMENU1","pdMENU2","pdMENU3"];
function pulldownmenu(mObj)
{
pdMENU = getMenuObj(mObj);
flag = pdMENU.style.visibility;
for (i=0; i<menuList.length; i++)
{
pdMENU = getMenuObj(menuList[i]);
pdMENU.style.visibility = "hidden";
}
pdMENU = getMenuObj(mObj);
if (flag == "visible") pdMENU.style.visibility = "hidden"; else pdMENU.style.visibility = "visible";
}
]]>
|
| 説 明 |
プルダウンメニューを表示させるにはドキュメントオブジェクトの表示、非表示を切り替えます。表示の切り替えはスタイルシートで行います。「オブジェクト名.style.visibility」にhiddenを設定すると非表示、visibleを設定すると表示されます。クリック毎に表示を切り替えるにはプルダウンメニューに使用しているオブジェクトの表示状態を読み出して処理します。表示されている場合には隠すようにhiddenを設定し、隠れている場合には表示するようにvisibleを設定します。複数のプルダウンメニューの場合、同時に１つしか表示させないために、あらかじめ表示するプルダウンメニューのオブジェクトのIDを配列に入れておきます。プルダウンメニューを表示する前の処理で全てのプルダウンメニューを隠すようにします。その後で、クリックされたプルダウンメニューを表示します。プルダウンメニューに使用するオブジェクト(サンプルではdivタグ)のIDはページ内で１つしかないものにしてください。同じIDがあると正常に動作しません。
|
| サンプル |
<![CDATA[
<html>
<head>
<title>クリックするとプルダウンメニューを出す（複数版）</title>
<script Language="JavaScript"><!--
menuList = ["pdMENU1","pdMENU2","pdMENU3"];
function pulldownmenu(mObj)
{
pdMENU = getMenuObj(mObj);
flag = pdMENU.style.visibility;
for (i=0; i<menuList.length; i++)
{
pdMENU = getMenuObj(menuList[i]);
pdMENU.style.visibility = "hidden";
}
pdMENU = getMenuObj(mObj);
if (flag == "visible") pdMENU.style.visibility = "hidden"; else pdMENU.style.visibility = "visible";
}
function getMenuObj(obj)
{
if (document.all) return document.all(obj);
if (document.getElementById) return document.getElementById(obj);
return obj;
}
// --></script>
</head>
<body>
<div style="position:absolute;top:0px;left:0px;">
<a href="javaScript:pulldownmenu('pdMENU1')">■検索エンジン</a>
</div>
<div id="pdMENU1" style="position:absolute;top:12px;left:0px;visibility:hidden">
<a href="http://www.yahoo.co.jp/" >Yahoo</A><BR>
<a href="http://www.infoseek.co.jp/">infoseek</A><BR>
<a href="http://www.lycos.co.jp/" >lycos</A><BR>
</div>
<div style="position:absolute;top:0px;left:150px;">
<a href="javaScript:pulldownmenu('pdMENU2')">■ニュース</a>
</div>
<div id="pdMENU2" style="position:absolute;top:12px;left:150px;visibility:hidden">
<a href="http://japan.cnet.com/">CNET</A><BR>
<a href="http://www.nikkei.co.jp/">NIKKEI</A><BR>
<a href="http://news.google.co.jp/nwshp?hl=ja&gl=jp">Google News!</A><BR>
</div>
<div style="position:absolute;top:0px;left:300px;">
<a href="javaScript:pulldownmenu('pdMENU3')">■Web</a>
</div>
<div id="pdMENU3" style="position:absolute;top:12px;left:300px;visibility:hidden">
<a href="http://www.openspc2.org/">OpenSpace</A><BR>
<a href="http://www.zspc.com/">ZSPC</A><BR>
</div>
</body>
</html>
]]>
|
| 補足説明 |
表示する位置はスタイルシートで設定しておきます。
|
|
■サンプルスクリプトを実行する >>実行
■各ブラウザでの動作結果を見る >>View!
|
クリックするとプルダウンメニューを出す
