良い思いつきだと思ったんだけど、この仕掛けは 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?