KH-WEBLOG TOP > WEBメモ > JavaScript > ドロップダウンメニュー:jQuery

ドロップダウンメニュー: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などでデザインをいじればOK。

参考サイト

Dynamic Drive

TAGS

.htaccess ActionScript All in one seo pack Contact Form 7 CSS CSS3 EC-CUBE Flash HTML HTML5 JavaScript jQuery LightBox PHP SEO WordPress アイキャッチ画像 アクセス解析 カテゴリー カラーミーショップ カート コメント ショートコード ソースコード タグ テンプレートタグ ドロップダウンメニュー パーマリンク ビジュアルエディタ フォーム フルスクリーン プラグイン ページテンプレート ページナビ ページ分割 マウスイベント リダイレクト リンク レンタルサーバー ロールオーバー 携帯サイト 条件分岐 正規表現 角丸 関連記事