droppy

最終更新日時：2010-09-01 17:49:40
jQuery

概要

droppyはjQueryのプラグインで、簡単にプルダウンメニューを作成することができます。
また、スタイルシートのみの実装とは異なって、多少アニメーションチックに表示することも出来ますので、JavaScript の使用が問題ない環境であれば、何も考えずにコレを使えばＯＫかと思います。

インストール

droppy公式サイトからアーカイブをダウンロードして展開します。
展開後の以下のファイルが実際に使用するJavaScriptファイルとスタイルシートとなります。

・src/javascript/jquery.droppy.js
・src/stylesheets/droppy.css

上記以外にjQueryが必要ですが、もし持っていなければ、docs/assets/jquery.jsを使えばＯＫです。

使用方法

使用するJavaScriptファイル、スタイルシートを head 部で指定します。

 <script type='text/javascript' src='assets/jquery.js'></script>
 <script type='text/javascript' src='javascripts/jquery.droppy.js'></script>
 <link rel="stylesheet" href="stylesheets/droppy.css" type="text/css" />

あとは、プルダウンメニューを body 部で以下のような感じで記述すればＯＫです。

 <ul id='nav'>
  <li><a href='#'>Top level 1</a></li>
  <li><a href='#'>Top level 2</a>
    <ul>
      <li><a href='#'>Sub 2 - 1</a></li>
      <li>
        <a href='#'>Sub 2 - 2</a>
        <ul>
          <li>
            <a href='#'>Sub 2 - 2 - 1</a>
            <ul>
              <li><a href='#'>Sub 2 - 2 - 1 - 1</a></li>
              <li><a href='#'>Sub 2 - 2 - 1 - 2</a></li>
              <li><a href='#'>Sub 2 - 2 - 1 - 3</a></li>
              <li><a href='#'>Sub 2 - 2 - 1 - 4</a></li>
            </ul>
          </li>
          <li><a href='#'>Sub 2 - 2 - 2</a></li>
          <li>
            <a href='#'>Sub 2 - 2 - 3</a>
            <ul>
              <li><a href='#'>Sub 2 - 2 - 3 - 1</a></li>
              <li><a href='#'>Sub 2 - 2 - 3 - 2</a></li>
              <li><a href='#'>Sub 2 - 2 - 3 - 3</a></li>
              <li><a href='#'>Sub 2 - 2 - 3 - 4</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li><a href='#'>Sub 2 - 3</a></li>
    </ul>
  </li>
 </ul>
 
 <script type='text/javascript'>
  $(function() {
    $('#nav').droppy();
  });
 </script>

以下のように指定すると、メニューの表示速度を指定可能です。
数値が少ないほど速くなります。
いわゆるwait値ですね。

 $('#nav').droppy({speed: 100});

メニュー非表示速度

メニューの表示速度は上記の通り指定可能なのですが、フォーカスが無くなって非表示になる時の速度は固定で指定不可となっています。
個人的には、メニューが非表示になる時の速度が非常に遅く感じられたので、以下のように変更してメニュー表示と非表示の速度が同等となるようにしました。
メニュー非表示時の速度も別途指定できた方がベターだと思いますが、個人的にはこれで十分なのと、本家が多分対応すると思うのでこれ以上は手を入れていません(^_^;

 38c38
 <       }, 500);
 ---
 >       }, options.speed);