政治,法律 スポ-ツ 旅行,地域 医療.健康 報道
便利eelife Java Script

   戻る

ドロップダウンメニュー。画面をクリックするとサブメニュ-が消えます。







サンプルソース
<!--HTMLタグ </HEAD>の下に挿入してください。-->
<BODY text="#000000" bgcolor="#FFFFFF" link="#ffffff" vlink="#ffffff" alink="#ff00ff">
<DIV id="menu0" style="position:absolute; left : 12px;
top : 37px; width : 75px; height : 114px; z-index:1; visibility : hidden;
background-color : green;
"><BR>
<FONT color="#FFFFFF">├ 政治<BR>
├ 官公庁<BR>
├ 自治体<BR>
├ 憲法<BR>
└ 法律</FONT><BR>
<BR>
</DIV>
<DIV id="menu1" style="position:absolute; left : 97px;
top : 37px; width : 75px; height : 143px; z-index : 2; visibility:hidden;
background-color : green;
"><FONT color="#FFFFFF"><BR>
├ ニュ-ス<BR>
├ 野球<BR>
├ サッカ-<BR>
├ ゴルフ<BR>
├ F1<BR>
├ 釣り<BR>
└ バレ-</FONT><BR>
<BR>
</DIV>
<DIV id="menu2" style="position:absolute; left : 187px;
top : 37px; width : 75px; height : 110px; z-index : 3; visibility:hidden;
background-color : green;
"><FONT color="#FFFFFF"><BR>
├ 国内<BR>
├ 海外<BR>
├ ホテル<BR>
├ 温泉<BR>
└ 観光地<BR>
</FONT><BR>
</DIV>
<DIV id="menu3" style="position:absolute; left : 270px;
top : 37px; width : 75px; height : 112px; z-index : 4; visibility:hidden;
background-color : green;
"><FONT color="#FFFFFF"><BR>
├ 国内<BR>
├ 海外<BR>
├ ホテル<BR>
├ 温泉<BR>
└ 観光地<BR>
</FONT><BR>
</DIV>
<DIV id="menu4" style="position:absolute; left : 362px;
top : 38px; width : 75px; height : 82px; z-index : 5; visibility:hidden;
background-color : green;
"><FONT color="#FFFFFF"><BR>
├ ニュ-ス<BR>
├ 新聞<BR>
└ テレビ</FONT><BR>
<BR>
</DIV>
<TABLE bgcolor="#006633" height="11">
<TBODY>
<TR>
<TD width="95"><A href="#" onmouseover="Show_obj('menu0')"><B>政治,法律</B></A></TD>
<TD width="71"><A href="#" onmouseover="Show_obj('menu1')"><B>スポ-ツ</B></A></TD>
<TD width="83"><A href="#" onmouseover="Show_obj('menu2')"><B>旅行,地域</B></A></TD>
<TD width="90"><A href="#" onmouseover="Show_obj('menu3')"><B>医療.健康</B></A></TD>
<TD width="53"><A href="#" onmouseover="Show_obj('menu4')"><B>報道</B></A></TD>
</TR>
</TBODY>
</TABLE>

</BODY>
<!--Javascript <HEAD>と</HEAD>の間に挿入してください。 -->
<SCRIPT language="JavaScript">
<!--eelife
flag="menu0";
window.document.onclick = Hide_objclk; //画面をクリックしたときイベントハンドラ ()を付けない

function get_Browser(Lyid){ // ブラウザの取得
if (document.getElementById) myObj=document.getElementById(Lyid).style; // N6
else if (document.all) myObj=document.all[Lyid].style; // IE
else if (document.layers) myObj=document[Lyid]; // N4
}

function Show_obj( Lyid ) { // マウスが乗った時サブメニューを表示
get_Browser(Lyid); // ブラウザオブジェクト
myObj.visibility = "visible"; // サブメニュー表示


if( flag== Lyid){};
else
Hide_obj(flag);
flag= Lyid;
}

function Hide_obj( Lyid ) {
get_Browser(Lyid); // ブラウザオブジェクト
myObj.visibility ="hidden"; // 非表示
}

function Hide_objclk(){ Lyid=flag; //画面をクリックした時に非表示にする
Hide_obj( Lyid )
}

// -->
</SCRIPT>
コメント
onmouseover="Show_obj('menu0')" : マウスが乗った時 ID名が 'menu0' のレイヤーを表示します。
window.document.onclick = Hide_objclk : 画面をクリックした時に Hide_objclk() を実行して
表示しているレイヤーを非表示にします。

レイヤーの作成