![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
|
Javascript Menu Bar |
良い思いつきだと思ったんだけど、この仕掛けは IE 8.0 で動かない orz
イベントフック(onmouseover)を書いた div の中に div を書いた場合、Firefox や Safari では内側の div 内でのユーザ操作で、外側の div に書いたイベントフックが発火するが、IE では発火しない。
( prototype.js は、http://prototypejs.org/ より入手)
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Menu Sample</title>
<script language="javascript" src="./prototype-1.6.0.3.js"></script>
<script language="javascript">
<!--
var MENU_WIDTH = "120px"
function showSubMenu(subMenuId){
$(subMenuId).style.display='block';
}
function showSubSubMenu(subMenuId,row){
// 表示位置指定は、親 DIV からの相対指定
$(subMenuId).style.top = row + "em";
$(subMenuId).style.left = MENU_WIDTH;
$(subMenuId).style.display = "block";
}
function hideSubMenu(subMenuId){
$(subMenuId).style.display='none';
}
function go(url){
alert(url); // 本番ではリンクにする
}
// -->
</script>
<style type=text/css>
/**
* Menu バー
*/
div.menuDiv{
color:white;
background:darkblue;
border-style:none;
width:120px;
}
/**
* Menu タブ (サブサブMenuでは透明度は 0.9*0.9 になる)
*/
div.subMenuDiv{
position:absolute;
color:white;
background:darkblue;
border-style:none;
filter:alpha(opacity=90); /* IE */
-moz-opacity:0.9; /* Firefox */
opacity:0.9; /* Safari */
width:120px;
display:none;
}
/**
* Menu タブに掲載する文言
*/
div.menuSubject {
text-align: left;
float: left; /* 次のdivを改行せずに回り込み描画 */
}
/**
* Sub Menu タブへのリンク(▶)
*/
div.menuLink {
text-align: right;
}
</style>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<div id="menu1" class="menuDiv"
onMouseOver="showSubMenu('subMenu1')"
onMouseOut="hideSubMenu('subMenu1')">
menu1
<div id="subMenu1" class="subMenuDiv">
<div onClick="go('sub1-1')">sub1-1</div>
<div onClick="go('sub1-2')">sub1-2</div>
<div onClick="go('sub1-3')">sub1-3</div>
</div>
</div>
</td>
<td>
<div id="menu2" class="menuDiv"
onMouseOver="showSubMenu('subMenu2')"
onMouseOut="hideSubMenu('subMenu2')">
menu2
<div id="subMenu2" class="subMenuDiv">
<div onClick="go('sub2-1')">sub2-1</div>
<div onClick="go('sub2-2')">sub2-2</div>
<div onClick="go('sub2-3')">sub2-3</div>
</div>
</div>
</td>
<td>
<div id="menu3" class="menuDiv"
onMouseOver="showSubMenu('subMenu3')"
onMouseOut="hideSubMenu('subMenu3')">
menu3
<div id="subMenu3" class="subMenuDiv">
<div onClick="go('sub3-1')">sub3-1</div>
<div onClick="go('sub3-2')">sub3-2</div>
<div
onMouseOver="showSubSubMenu('subMenu33',3)"
onMouseOut="hideSubMenu('subMenu33')">
<div class="menuSubject">sub3-3</div>
<div class="menuLink">▶</div>
<div id="subMenu33" class="subMenuDiv">
<div onClick="go('sub3-3-1')">sub3-3-1</div>
<div onClick="go('sub3-3-2')">sub3-3-2</div>
<div onClick="go('sub3-3-3')">sub3-3-3</div>
</div>
</div>
<div onClick="go('sub3-4')">sub3-4</div>
</div>
</div>
</td>
</tr>
</table>
0123456789012345678901234567890123456789<br/>
0123456789012345678901234567890123456789<br/>
0123456789012345678901234567890123456789<br/>
0123456789012345678901234567890123456789<br/>
0123456789012345678901234567890123456789<br/>
</body>
</html>
Javascript?
jsmenu.png