• RSS

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

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

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

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

Droppy のダウンロード

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


Droppy の設置

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

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


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

メニュー部分のデザインは、以下のように組みます。
ドロップダウンメニューを適用したい親要素に id="nav" を指定します。

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


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

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

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


droppy.css のカスタマイズ

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

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


以下に、簡単なサンプルを用意してみました。
Droppy によるドロップダウンメニューのデモ

参考ページ
Droppy



  • このエントリーをはてなブックマークに追加
  • follow us in feedly

コメント

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください