簡単なサブメニューのドロップダウン

Webブラウザ上での簡単なドロップダウンメニューをためしてみました。
水平方向にメニューが並び、そのメニューに部分をマウスポイントを移動させるとサブメニューがドロップダウンするというものです。XHTML1.0を対象にしました。

html

メニュー部分のhtmlです。箇条書き(ulとliタグ)をネストしてメインメニューとサブメニューを表現しています。

<div id="nav_div">
  <ul id="dd">
    <li id="nav1" class="nav">nav1
      <div id='nav1_sub' class="nav_sub">
        <ul>
          <li><a href="item1">item1</a></li>
          <li><a href="item2">item2</a></li>
        </ul>
      </div>
    </li>
    <li id="nav2" class="nav">nav2       
      <div id='nav2_sub' class="nav_sub">   
        <ul>
          <li><a href="item3">item3</a></li>
          <li><a href="item4">item4</a></li>
        </ul>
      </div>
    </li>
    <li id="nav3" class="nav">nav3          
      <div id='nav3_sub' class="nav_sub">   
        <ul>
          <li><a href="item5">item5</a></li>
	      <li><a href="item6">item6</a></li>
	    </ul>
      </div>
    </li>
  </ul>
</div>

css

cssでは、サブメニューの部分(クラスがnav_subのdiv要素)が非表示になるように定義しています。

 .nav {
  float:left;
  position:relative;
  list-style:none;
  text-align:center;
  width:5em;
  background-color:#CCAA33;
  border: 1px solid #EEEEEE;
  }

 .nav_sub {
  width:7em;
  background-color:#EEEEFF;
  visibility:hidden;
  position: absolute;
  border: 1px solid #331199;
  }

 .nav_sub ul {
  width:100%;
  text-align:left;
  margin: 0px;
  padding: 0px;
 }
 
 .nav_sub li {
  border: 1px solid #331199;
  list-style:none;
  text-align:left;
 }

1. 1. サブメニューが通常表示されないよう、「visibility:hidden」を指定しています。
   2. メインメニューが横方向に並ぶようメインメニューのli要素に「float:left」と指定しています。前後に不要な領域ができてしまいます。
   3. サブメニューのmarginとpaddingに0pxを指定していますが、こうしないと、
   4. 箇条書きの先頭の「・」が表示されないよう、メインメニュー、サブメニューともlist-styleにnoneを指定しています。

1. 1. 表示/非表示コントロールのためのjavascript

メインメニューにマウスポイントがきたときだけサブメニューが表示されるようjavascriptのコードを追加します。メインメニューへのマウスオーバーとマウスアウト時にサブメニューのスタイルシートのvisibility属性を切り替えるだけの処理をイベントハンドラとして登録しているだけです。prototype.jsの1.6を使っての実装にしています。

function init() {
  $$('li.nav').each( function(e) {
    if($(e.id + '_sub') ) {
      $(e.id + '_sub').style.visibility="hidden";
      e.observe("mouseover", function() {
        $(e.id + '_sub').style.visibility="visible";
      } );
      e.observe("mouseout", function() {
        $(e.id + '_sub').style.visibility="hidden";
      } );
    }
  } );
}
document.observe('dom:loaded', init);

1. 1. prototypeの$$関数でnavクラスに属するli要素全てを取得してイベント登録処理を行っています。