ユーザービリティを高める手法として、オンマウスでドロップダウンメニューが表示させるといったものがあります。これによって閲覧したいコンテンツまでたどり着くのに、無駄な遷移をしなくて済むなどメリットがあります。今回のエントリーでは超簡単にドロップダウンメニューを実装できるフリーのJavascriptを紹介します。まずは以下のサイトからソースをダウンロードしてください。

Sliding JavaScript Dropdown Menu

ZIPの中身は以下の通り。

  • imagesフォルダ
  • dropdown.js
  • dropdown.css
  • dropdown.html ※サンプルソース

まずはドロップダウンを利用したいページの<head>~</head>内で、CSSとJavaScriptを呼び出して下さい。

<link rel="stylesheet" href="dropdown.css" type="text/css" />
<script type="text/javascript" src="dropdown.js"></script> 

そして、<body>~</body>内に以下のソースを挿入してください。

<dl class="dropdown">
<dt id="one-ddheader" onmouseover="ddMenu('one',1)" onmouseout="ddMenu('one',-1)">Dropdown One</dt>
<dd id="one-ddcontent" onmouseover="cancelHide('one')" onmouseout="ddMenu('one',-1)">
<ul>
<li><a href="#" class="underline">Navigation Item 1</a></li>
<li><a href="#" class="underline">Navigation Item 2</a></li>
<li><a href="#" class="underline">Navigation Item 3</a></li>
<li><a href="#" class="underline">Navigation Item 4</a></li>
<li><a href="#">Navigation Item 5</a></li>
</ul>
</dl> 

上記のソースがドロップダウンのワンセットになります。<dt>~</dt>がボタン、<li>~</li>がドロップダウンメニューのリストです。ドロップダウンを複数個所使いたい場合はこのワンセットを使いたい数だけ挿入して、onmouseoverとonmouseoutのddMenucancelHideで指定している'one'の部分を'two'だか'three'だかに変更してください。

後はドロップダウンを使うページのデザインにあわせて、dropdown.cssのプロパティを修正すれば完了です。Javascriptの知識がなくてもHTMLとCSSの知識があれば超簡単に実装できるのでお勧めです。

せっかくだったので、このブログにもナビゲーションを設けてそこでドロップダウンを実装してみましたので参考になればと思います。