Javascript Menu Bar

2024-12-042024
92.5% (338.8/366)
December
12.2% (3.8/31)
Week 49
40% (2.8/7)
Day 04 Wed
80.1% (19.2/24)

訪問者

total: 11244
today: 1
yesterday: 1
now: 1

更新

MenuBar

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

Javascript でメニューバー
ソースコード

Javascript でメニューバー †

サブサブメニュー(▶)の無いメニューバーなら割合と簡単にできるんだけど・・・サブサブメニューを作るのは結構面倒くさい
某お客さんに「それくらい簡単にできるでしょ」といわれちゃったんで、基礎研究として作ってみた
- JSでのやり方はだいたい分かったんで、後は適当な定義(XMLなど)を読み込んで、下みたいな Javascript を吐く tag-lib を作る (諸般の事情により tag-lib は、ここには載せられないでしょう・・・)
ミソは、onMouseOut? イベントを起こしたい範囲で div を作ること
残課題としては、ブラウザの右端からサブサブメニューがはみ出たときにどうするか・・・ユーザビリティ的には、そういうときはサブサブメニューを左に出すようにするんだろうけど・・・

↑

ソースコード †

( 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?

Javascript Menu Bar

目次

訪問者

更新

最新の10件

人気の10件

MenuBar

Javascript でメニューバー †

ソースコード †