良い思いつきだと思ったんだけど、この仕掛けは IE 8.0 で動かない orz
イベントフック(onmouseover)を書いた div の中に div を書いた場合、Firefox や Safari では内側の div 内でのユーザ操作で、外側の div に書いたイベントフックが発火するが、IE では発火しない。


Javascript でメニューバー

jsmenu.png

ソースコード

( 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 タブへのリンク(&#9654;)
 */
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">&#9654;</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?


添付ファイル: filejsmenu.png 731件 [詳細]

トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS   sitemap
Last-modified: 2009-08-15 (土) 14:50:42 (2671d)
ISBN10
ISBN13
9784061426061