MENU
◆プルダウンメニュー[2]
レイヤーを使ったプルダウンメニューです。
ブラウザによって表示が違うので注意が必要です。

<HEAD>
<style type="text/css">
<!--
.layer1{ position:absolute; padding:5px; z-index:1; background-color:#99ccff; width:170px; }
.layer2{ position:absolute; padding:5px; z-index:1; background-color:#ddeeff; width:170px; margin-top:24px; visibility:hidden; }
-->
</style>
<script type="text/javascript">
<!--
var openedMenu = null;
//画像メニューにポインタがきた時
function menuOvr(id){
// 開いているメニューと違うメニューであれば隠す。
if (openedMenu && openedMenu != id){
CloseMenu(id);
}
// サブウィンドウの表示
OpenMenu(id);
}
//レイヤーメニューの表示
function OpenMenu(id){
if ( document.getElementById ){
document.getElementById( id ).style.visibility = 'visible';
}else if ( document.all ){
document.all( id ).style.visibility = 'visible';
}else if ( document.layers ){
document.layers[ id ].visibility = 'show';
}
openedMenu = id;
}
//レイヤーメニューを隠す
function CloseMenu(){
if ( document.getElementById ){
document.getElementById( openedMenu ).style.visibility = 'hidden';
}else if ( document.all ){
document.all( openedMenu ).style.visibility = 'hidden';
}else if ( document.layers ){
document.layers[ openedMenu ].visibility = 'hide';
}
openedMenu = null;
}
//-->
</script>
</HEAD>

<table width="575" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><DIV id="layer0" class="layer1"><a href="javascript:;" onMouseOver="menuOvr('layer1')" onClick="CloseMenu();">Atelier H</a></DIV></td>
<td><DIV id="layer0" class="layer1"><a href="javascript:;" onMouseOver="menuOvr('layer2')" onClick="CloseMenu();">garage CGI</a></DIV></td>
<td><DIV id="layer0" class="layer1"><a href="javascript:;" onMouseOver="menuOvr('layer3')" onClick="CloseMenu();">Rank Up Homepage</a></DIV></td>
</tr>
<tr>
<td><DIV id="layer1" class="layer2">&gt;&gt;<a href="../index.html">HOME</a><br>
&gt;&gt;<a href="../cgi/index.html">garage CGI</a><br>
&gt;&gt;<a href="../js/index.html">Javascriptの小筺</a></DIV></td>
<td><DIV id="layer2" class="layer2">&gt;&gt;<a href="../cgi/easy.html">イージーフォーム</a><br>
&gt;&gt;<a href="../cgi/random.html">ランダムフォーム</a></DIV></td>
<td><DIV id="layer3" class="layer2">&gt;&gt;<a href="rank1_1.html">カラースクロールバー</a><br>
&gt;&gt;<a href="rank2_2.html">文字コード表</a></DIV></td>
</tr>
</table>

Copyright2008 ©Atelier H All rights reserved.