ドロップダウンメニュー usermenu.js

とあるサイトの画面上部にドロップダウンメニューを設置する依頼を受け、 "LEIGEBER web development blog" で配布している "dropdown.js" を改造した。
思いのほか汎用性が高いものに仕上がったので、こっそり配布させて頂く。 :-)

usermenu.js ダウンロード
サンプル


全コード書き直したけど、ロジック自体はこちらで配布しているものとほぼ同じ。

LEIGEBER web development blog
Sliding JavaScript Dropdown Menu


依頼ではメニューがタブ状の画像であり、また、マウスオーバー時にタブ画像をハイライトさせる必要があった。
dropdown.jsをそのまま利用するのでは実現できず、この点を含めた以下の機能追加を行った。

  • テキストではなく、画像のメニュー。
  • マウスオーバー時、メニュー画像を差し替え。
  • 透明度等、各種パラメータの調整。
  • HTMLマークアップの簡略化。

これらを実現している代わりに、 prototype.js に依存してしまっている点にはご容赦頂きたい。
設置手順は以下の通り。


まず、prototype.js, usermenu.js, usermenu.css を読み込む。
設置先ページのhead要素内に、以下の記述を追加。

<script type="text/javascript" src="/path/to/prototype.js" charset="utf-8"></script>
<script type="text/javascript" src="/path/to/usermenu.js" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="/path/to/usermenu.css" />


次に、メニューのマークアップを行う。
以下、サンプル。

<div id="usermenu">
  <dl id="usermenu_sample1">
    <dt><a href="#"><img src="images/spacer.gif" width="60" height="25" alt="HOME" /></a></dt>
  </dl>
  <dl id="usermenu_sample2">
    <dt><img src="images/spacer.gif" width="60" height="25" alt="DIARY" /></dt>
    <dd>
      <ul>
        <li><a href="0701.html">7/1</a></li>
        <li><a href="0702.html">7/2</a></li>
        <li><a href="0703.html">7/3</a></li>
        <li><a href="0704.html">7/4</a></li>
      </ul>
    </dd>
  </dl>
</div>
<script type="text/javascript">
  new UserMenu('sample1');
  new UserMenu('sample2');
</script>

マークアップは、以下のルールに従い行う。

  • ドロップダウンメニュー全体を、ブロック（id "usermenu" ）でくくる。
  • 各々のメニューを、dl要素でくくる。idは、 "usermenu_" に続けて任意のメニュー名。（このメニュー名は、JavaScript記述でも使用する、後述）
  • メニューの中にdt要素を置き、適当な画像（img要素）を置く。画像の中身はよくあるスペーサーGIFで良いが、width, height, alt属性は、正しい値をきちんと記入しておく。また、画像自体をaタグでくくってリンクにしてもよい。
  • メニューがメニュー項目を持つ場合は、メニューの中にdd要素を置き、その中に更にulリスト（ul,li要素）を置いてメニュー項目を記述する。メニュー項目をひとつも持たないメニューには、dd要素を記述しない。


マークアップが出来たら、usermenuブロックの外にscript要素を置く。
dl要素のところで定義したメニュー名を引数として（dl要素のidが "usermenu_sample1" ならば、メニュー名は "sample1"）、定義したdlひとつごとに対応するUserMenuオブジェクトを生成する。


次に、素材画像の設置を行う。
設置先ページからの相対参照で images/usermenu に相当するディレクトリに、 <メニュー名>.gif と <メニュー名>_on.gif を置く。（メニュー名が "sample1" ならば、 sample1.gif と sample1_on.gif）
前者は通常時の画像、後者はマウスオーバー時の画像。両画像のピクセルサイズは一致させること。


最後に、usermenu.cssの調整。
設置先ページをリロードしながら、ページレイアウトに合わせた各種調整をusermenu.cssに対して行い、設置完了。


サンプルで利用しているうさぎ素材は、うさぎ小屋さんからお借りしました。
いつもお世話になってます。また美味いもの食いに行きましょう。＞うさ番

動作保証はしませんが、ご利用・各種流用等はご自由に。


2009/08/22追記:
一部のIE環境で起きる不具合を修正。