水平ドロップダウン型メニューの表示

水平方向のドロップダウン型メニュー表示が出来るプラグインを試してみました。

サンプルコード＆ダウンロードは以下から。
jdMenu公式ページ

使用するファイルは
・jquery.jdMenu.css
・jquery.bgiframe.js
・jquery.dimensions.js
・jquery.jdMenu.js
・jquery.positionBy.js
以上の5つです。


使い方

---

jQuery本体とjdMenu一式を組み込む
<link rel="stylesheet" href="jquery.jdMenu.css" type="text/css"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script> <script type="text/javascript" src="jquery.bgiframe.js"></script> <script type="text/javascript" src="jquery.dimensions.js"></script> <script type="text/javascript" src="jquery.jdMenu.js"></script> <script type="text/javascript" src="jquery.positionBy.js"></script>

後はHTML部分でul/liを使ってメニューを作るだけです。
最上位のul要素には[class="jd_menu"]を記述します。
<ul class="jd_menu"> <li><a href="">Home</a></li> <li><a href="#">検索エンジン »</a> <ul> <li><a href="http://www.google.co.jp" target="_blank">Google</a></li> <li><a href="http://www.yahoo.co.jp" target="_blank">Yahoo!</a></li> <li><a href="http://jp.msn.com/" target="_blank">MSN</a></li> </ul> </li> <li><a href="#">Google »</a> <ul> <li><a href="#">検索項目 »</a> <ul> <li><a href="http://www.google.co.jp" target="_blank">Google 検索</a></li> <li><a href="http://images.google.com" target="_blank">Google 画像検索</a></li> </ul> </li> <li><a href="http://maps.google.co.jp" target="_blank">Google マップ</a></li> <li><a href="http://mail.google.com" target="_blank">Gmail</a></li> </ul> </li> </ul>

サンプルはこちら
簡単にドロップダウンメニューが作れて便利です。

おわり。