droppy - ネスト形のドロップダウン・メニュー

概要

Quick and dirty nested drop-down menu in the jQuery styleee. I needed a nav like this for a recent project and a quick Googling turned up nothing that really suited, so droppy was born. It hasn't been designed with flexibility in mind - if you like what you see, great, integration should be a breeze - otherwise I'd look for something more configurable elsewhere.

例

使用方法

ここでは、必須な構成用オプションも何も不要で、単にJavascript/CSSリソースをインクルードして、 ドキュメントの head、または他の適切な場所に以下のコードを挿入するだけです:

Javascript:
<script type='text/javascript'>
  $(function() {
    $('#nav').droppy();
  });
</script>

HTML の例を以下に示します:

HTML:
<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>

Droppy は、アニメーション時間を設定するため、ただ1つの構成オプション、speed をサポートします。

speed を指定した例:
<script type='text/javascript'>
  $(function() {
    $('#nav').droppy({speed: 100});
  });
</script>

事例のCSSファイルは、カスタマイズを容易にするために、3つの小さなセクションに分割されています。 バージョン 0.1.2 現在、'hover' CSSクラスは、IE6でのskinabilityを改善する、ロールオーバーのメニューにおける、<li> と <a> タグの両方に適用されます。

ダウンロード

Package

パッケージは、 jQuery project page からダウンロードできます。.

github

jason@donut ~ $ git clone git@github.com:jaz303/droppy.git

既知の問題点