ドロップダウンメニュー：jQuery
シェア
ツイート
最終更新日：
よくあるjQueryのドロップダウンメニューです。
サンプル
今回はSmooth Navigational Menuというものを使用します。
ダウンロード
まず↓サイトから
jquery.js
http://jquery.com/
をダウンロードし、
次に↓サイトから
Smooth Navigational Menu
http://www.dynamicdrive.com/dynamicindex1/ddsmoothmenu.htm
それぞれ以下のファイルをダウンロード
・ddsmoothmenu.js （必須）
・ddsmoothmenu.css （一応必須）
・ddsmoothmenu-v.css （縦メニュー用）
・あとimage画像が2つありますがそちらはお好みで
Javascriptの記述
実装したいページに
<head>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/smoothmenu.js"></script>
<script type="text/javascript">
/*横メニュー用*/
ddsmoothmenu.init({
mainmenuid: "id名を記述（デフォルトはsmoothmenu1）", //menu DIV id
orientation: 'h', //Horizontal or vertical menu: Set to "h" or "v"
classname: 'クラス名を記述（デフォルトはddsmoothmenu）', //class added to menu's outer DIV
contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
})
/*縦メニュー用*/
ddsmoothmenu.init({
mainmenuid: "id名を記述（デフォルトはsmoothmenu2）", //Menu DIV id
orientation: 'v', //Horizontal or vertical menu: Set to "h" or "v"
classname: 'クラス名を記述（デフォルトはddsmoothmenu-v）', //class added to menu's outer DIV
contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
})
</script>
</head>
と記述。
htmlの記述
↑で指定したid名とクラス名で、
横メニューの場合
<h2>横メニュー</h2>
<div id="smoothmenu1" class="ddsmoothmenu">
<ul>
<li><a href="#">メニュー 0</a></li>
<li><a href="#">メニュー 1</a>
<ul>
<li><a href="#">サブメニュー 1.1</a></li>
<li><a href="#">サブメニュー 1.2</a></li>
<li><a href="#">サブメニュー 1.3</a></li>
<li><a href="#">サブメニュー 1.4</a></li>
</ul>
</li>
<!--中略-->
<li><a href="#">メニュー 4</a>
<ul>
<li><a href="#">サブメニュー 4.2</a>
<ul>
<li><a href="#">サブメニュー 4.2.1</a></li>
<li><a href="#">サブメニュー 4.2.3</a>
<ul>
<li><a href="#">サブメニュー 4.2.3.1</a></li>
<li><a href="#">サブメニュー 4.2.3.2</a></li>
<li><a href="#">サブメニュー 4.2.3.3</a></li>
<li><a href="#">サブメニュー 4.2.3.4</a></li>
<li><a href="#">サブメニュー 4.2.3.5</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
縦メニューの場合
<h2 style="margin-top:200px">縦メニュー</h2>
<div id="smoothmenu2" class="ddsmoothmenu-v">
<ul>
<li><a href="#">メニュー 0</a></li>
<li><a href="#">メニュー 1</a>
<ul>
<li><a href="#">サブメニュー 1.1</a></li>
<li><a href="#">サブメニュー 1.2</a></li>
<li><a href="#">サブメニュー 1.3</a></li>
<li><a href="#">サブメニュー 1.4</a></li>
</ul>
</li>
<!--中略-->
<li><a href="#">メニュー 4</a>
<ul>
<li><a href="#">サブメニュー 4.2</a>
<ul>
<li><a href="#">サブメニュー 4.2.1</a></li>
<li><a href="#">サブメニュー 4.2.3</a>
<ul>
<li><a href="#">サブメニュー 4.2.3.1</a></li>
<li><a href="#">サブメニュー 4.2.3.2</a></li>
<li><a href="#">サブメニュー 4.2.3.3</a></li>
<li><a href="#">サブメニュー 4.2.3.4</a></li>
<li><a href="#">サブメニュー 4.2.3.5</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
という感じに記述。
カスタマイズ
smoothmenu.jsのカスタマイズ
arrowimages: {down:['downarrowclass', 'img/down.gif', 23], right:['rightarrowclass', 'img/right.gif']},//矢印等の画像の指定
transition: {overtime:300, outtime:300}, //duration of slide in/ out animation, in milliseconds
shadow: {enable:true, offsetx:5, offsety:5}, //ドロップシャドウをつけるかどうかとそのサイズ（シャドウをつけないならfalseを指定）
showhidedelay: {showdelay: 100, hidedelay: 200}, //set delay in milliseconds before sub menus appear and disappear, respectively
上記以外の部分も色々いじれるから後は自分の好みで。
あとはCSSなどでデザインをいじればＯＫ。
参考サイト
JavaScriptのおすすめ参考書
ポチップ
ポチップ
