ドロップダウン型メニューを垂直に並べる

前回のドロップダウン型メニューのコードを、ちょっと変更するだけでメニューを垂直に出来るみたいなので、やってみました。

使用するファイルは前回と同じく以下の５つです。
・jquery.jdMenu.css
・jquery.bgiframe.js
・jquery.dimensions.js
・jquery.jdMenu.js
・jquery.positionBy.js


使い方

---

ソースコードは前回やった水平のドロップダウン型メニューとほとんど同じです。

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>

ul/li要素を使ってメニューを作る。
<ul class="jd_menu jd_menu_vertical"> <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>

前回のドロップダウンメニューとほぼ同じソースです。
異なる部分は、最上位のulタグの[class="jd_menu"]の部分が、[class="jd_menu jd_menu_vertical"]となっている点。

つまり、class要素を[class="jd_menu"]とすると水平に
[class="jd_menu jd_menu_vertical"]とすると垂直にメニューが並びます。

サンプルはこちら 水平/垂直の変更も簡単にできますね。

おわり。