例-1（Script依存、マウス依存）

HTMLソース

（CSS - すべての例に共通）

<style type="text/css">
   div.sample1{padding:20px;line-height:0px;}
   div.main{margin-bottom:0px;}
   div.sub{margin-top:0px;line-height:0px;}
   a img{border:none;margin-top:-2px;margin-bottom:-2px;}
   div.sample1 a{text-decoration:none;}
</style>

（JavaScript - すべての例に共通）

<script type="text/javascript">
function showMenu(selfObj){
   document.menu1.src="images/rosenzu_off.gif";
   document.menu2.src="images/rekishi_off.gif";
   document.menu3.src="images/midokoro_off.gif";
  if(selfObj==0){
    document.menu0.src="images/midousuji_on.gif";
  }
  if(selfObj==1){
    document.menu1.src="images/rosenzu_on.gif";
  }
  if(selfObj==2){
    document.menu2.src="images/rekishi_on.gif";
  }
  if(selfObj==3){
    document.menu3.src="images/midokoro_on.gif";
  }
}
function hideMenu(){
  document.menu0.src="images/midousuji_off.gif";
  document.menu1.src="images/spacer.gif";
  document.menu2.src="images/spacer.gif";
  document.menu3.src="images/spacer.gif";
}
</script>

（HTML）

<div class="sample1">
 <div class="main">
  <a href="#"
    onmouseout="hideMenu();"
    onmouseover="showMenu(0);"
    class="navi0">
    <img src="images/midousuji_off.gif" alt="御堂筋線"
         name="menu0" id="menu0" />
 </a>
 </div>
 <div class="sub">
  <a href="sample1.html"
    onmouseout="hideMenu();"
    onmouseover="showMenu(1);"
    class="navi1">
    <img src="images/spacer.gif" alt="路線図"
         name="menu1" id="menu1" />
  </a><br />
  <a href="sample2.html"
    onmouseout="hideMenu();"
    onmouseover="showMenu(2);"
    class="navi2">
    <img src="images/spacer.gif" alt="歴史"
         name="menu2" id="menu2" />
  </a><br />
  <a href="sample3.html"
    onmouseout="hideMenu();"
    onmouseover="showMenu(3);"
    class="navi3">
    <img src="images/spacer.gif" alt="見どころ"
         name="menu3" id="menu3" />
  </a><br />
 </div>
</div>

• キーボードアクセスが実質不可能（マウスを使わないとメニューが展開できない）。
• Scriptが動作しない環境では動かない。

例-2（キーボードアクセスを可能にする）

HTMLソース

<div class="sample1">
 <div class="main">
  <a href="#"
    onmouseout="hideMenu();"
    onmouseover="showMenu(0);"
    onfocus="showMenu(0);"
    onblur="hideMenu();"
    class="navi0">
    <img src="images/midousuji_off.gif" alt="御堂筋線"
         name="menu0" id="menu0" />
  </a>
 </div>
 <div class="sub">
  <a href="sample1.html"
    onmouseout="hideMenu();"
    onmouseover="showMenu(1);"
    onfocus="showMenu(1);"
    onblur="hideMenu();"
    class="navi1">
    <img src="images/spacer.gif" alt="路線図"
         name="menu1" id="menu1" />
  </a><br />
  <a href="sample2.html"
    onmouseout="hideMenu();"
    onmouseover="showMenu(2);"
    onfocus="showMenu(2);"
    onblur="hideMenu();"
    class="navi2">
    <img src="images/spacer.gif" alt="歴史"
         name="menu2" id="menu2" />
  </a><br />
  <a href="sample3.html"
    onmouseout="hideMenu();"
    onmouseover="showMenu(3);"
    onfocus="showMenu(3);"
    onblur="hideMenu();"
    class="navi3">
    <img src="images/spacer.gif" alt="見どころ"
         name="menu3" id="menu3" />
  </a><br />
 </div>
</div>

• onmouseover, onmouseoutに加えてonfocus,onblurを指定。
• タブキーでフォーカスを移動するとメニューが展開される。

例-3（Scriptに依存しない）

HTMLソース

（サンプルコードの3〜8行目のみ）

<a href="sample0.html"
    onmouseout="hideMenu();"
    onmouseover="showMenu(0);"
    onfocus="showMenu(0);"
    onblur="hideMenu();"
    class="navi0">

• メニューを展開するためのオブジェクトにもリンク先を指定し、サブメニューページを追加した。
• Scriptが動作しない環境でも情報にアクセスできる。

Tips

• [12] onmouseover, onmouseoutを指定する場合は、あわせてonfocus,onblurを指定する。
• [13] 動的に生成する階層メニューでは、サブメニューが展開されなくても動作可能にする。