概要
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
既知の問題点
- CSS opacity effects applied to
#nav ul
or#nav li
selectors will cumulate with each level of nesting. Workaround: apply opacity effects to#nav a
or use a 1×1 transparent PNG for background color.