[jQuery]シンプルなドロップダウンメニューが簡単に実装できるプラグインDroppy

jQueryプラグイン・ライブラリ

2012.08.16

ヘッダーのグローバルメニュー等で、マウスオーバーによるドロップダウンメニューを実現させるためのjQueryプラグインDroppy。

シンプルなプラグインなので手軽に設定できますし、メニューの階層が深い場合でも入れ子のドロップダウンメニューが実装可能です。

Droppy のダウンロード
Droppy の設置
ドロップダウンメニューのデザイン
入れ子のドロップダウンメニュー
droppy.css のカスタマイズ

Droppy のダウンロード

以下のページよりDroppyのファイルをダウンロードします。
Droppy

Droppy の設置

ダウンロードしたdroppy.css、jquery.droppy.jsとjqueryファイルを<head>内に設置します。

<link rel="stylesheet" href="./droppy.css">
<script src="./jquery.min.js"></script>
<script src="./jquery.droppy.js"></script>
<script type='text/javascript'>
  $(function() {
	$('#nav').droppy({
		speed: 100
	});
  });
</script>

$(function() {

$('#nav').droppy({

speed: 100

});

</script>

オプションとして、speed:100の部分でドロップダウンメニュー出現時の速度を調整できます。

ドロップダウンメニューのデザイン

メニュー部分のデザインは、以下のように組みます。

ドロップダウンメニューを適用したい親要素にid="nav"を指定します。

<ul id="nav">
	<li><a href="#">ナビ1</a></li>
	<li><a href="#">ナビ2</a>
    	<ul>
			<li><a href="#">ナビ2-1</a></li>
			<li><a href="#">ナビ2-2</a></li>
        </ul>
	</li>
	<li><a href="#">ナビ3</a></li>
</ul>

<ul>

</ul>

</li>

</ul>

上記例だと、ul id="nav"にぶら下がるリストがドロップダウンメニューの適用範囲となり、「ナビ2」の部分がドロップダウンメニューになります。

入れ子のドロップダウンメニュー

「親カテゴリ」「子カテゴリ」のようにメニューの階層が深くなる場合でも、Droppyを使えば簡単に入れ子のドロップダウンメニューが実現できます。

<ul id="nav">
	<li><a href="#">ナビ1</a></li>
	<li><a href="#">ナビ2</a>
    	<ul>
			<li><a href="#">ナビ2-1</a></li>
			<li><a href="#">ナビ2-2</a>
                <ul>
                    <li><a href="#">ナビ2-2-1</a></li>
                    <li><a href="#">ナビ2-2-2</a></li>
                </ul>
        	</li>
        </ul>
	</li>
	<li><a href="#">ナビ3</a></li>
</ul>

<ul>

<ul>

</ul>

</li>

</ul>

</li>

</ul>

上記例のように、「ナビ2」のメニューに「ナビ2-1」「ナビ2-2-1」のようなメニューをぶら下げることができます。

droppy.css のカスタマイズ

droppy.cssを使う場合ですが、14行目の.droppy ul { width:130px }でドロップダウンメニューのサイズ（幅）を、20行目以下でナビのデザイン（色とか）を調整できます。

また、メニューを入れ子にする際には、15行目の.droppy ul ul { left: 131px; }も合わせて調整すると良いと思います。

/* Basic code - don't modify */
 
 .droppy { display: block; margin: 0; padding: 0; position: relative; }
  .droppy li { display: block; list-style: none; margin: 0; padding: 0; float: left; position: relative; }
  .droppy a { display: block; }
  .droppy ul { display: none; position: absolute; left: 0; margin: 0; padding: 0; }
  * html .droppy ul { line-height: 0; } /* IE6 "fix" */
  	.droppy ul a { zoom: 1; } /* IE6/7 fix */
    .droppy ul li { float: none; }
    .droppy ul ul { top: 0; }
    
/* Essentials - configure this */

.droppy ul { width: 130px; }
.droppy ul ul { left: 131px; }

/* Everything else is theming */
 
/*.droppy { background-color: #30A8C3; height: 24px; }*/
.droppy *:hover { background-color: none; }
.droppy a { border-right: 1px solid white; color: white; font-size: 12px; padding: 6px; line-height: 1; }
  .droppy li.hover a { background-color: #5E5A5A; }
  .droppy ul { top: 25px; }
    .droppy ul li a { background-color: #5E5A5A; }
      .droppy ul a.has-subnav { background-color: #2E2A2A }
			.droppy ul a.hover { background-color: #30A8C3; }
   .droppy ul a { border-bottom: 1px solid white; border-right: none; opacity: 0.9; filter: alpha(opacity=90); }
/* .droppy ul a { border-bottom: none; } - I also needed this for IE6/7 */

/* Basic code - don't modify */

.droppy { display: block; margin: 0; padding: 0; position: relative; }

.droppy li { display: block; list-style: none; margin: 0; padding: 0; float: left; position: relative; }

.droppy a { display: block; }

.droppy ul { display: none; position: absolute; left: 0; margin: 0; padding: 0; }

* html .droppy ul { line-height: 0; } /* IE6 "fix" */

.droppy ul a { zoom: 1; } /* IE6/7 fix */

.droppy ul li { float: none; }

.droppy ul ul { top: 0; }

/* Essentials - configure this */

.droppy ul { width: 130px; }

.droppy ul ul { left: 131px; }

/* Everything else is theming */

/*.droppy { background-color: #30A8C3; height: 24px; }*/

.droppy *:hover { background-color: none; }

.droppy a { border-right: 1px solid white; color: white; font-size: 12px; padding: 6px; line-height: 1; }

.droppy li.hover a { background-color: #5E5A5A; }

.droppy ul { top: 25px; }

.droppy ul li a { background-color: #5E5A5A; }

.droppy ul a.has-subnav { background-color: #2E2A2A }

.droppy ul a.hover { background-color: #30A8C3; }

.droppy ul a { border-bottom: 1px solid white; border-right: none; opacity: 0.9; filter: alpha(opacity=90); }

/* .droppy ul a { border-bottom: none; } - I also needed this for IE6/7 */

以下に、簡単なサンプルを用意してみました。

Droppy によるドロップダウンメニューのデモ

参考ページ
http://onehackoranother.com/projects/jquery/droppy/