げんきワークスtools　[jQueryで作るドロップダウンメニュー]

なるべく簡単に実装できる画像を用いたドロップダウンメニュー

jQueryを使ったドロップダウンメニューのサンプルは巷にあふれているのですが、メニューに画像が使ったものが少ないな。と思ったので、今後の勉強を兼ねて、なるべく簡単に（script部分をいじったりしないで）実装できる画像付ドロップダウンメニューを作成してみました。

サンプル表示

（実装方法）

まずは下記をダウンロードし解凍

>>gwMenu.lzh

次にjQueryもダウンロード

>>jQuery
※ページ真ん中ら辺の　Current Release　というところから最新のをダウンロードすればOKと思います。（今回のサンプルは　var 1.4.2 を使用。

<head>内に読み込み（jQueryファイルは適宜書き換えてください）

<script type="text/javascript" src="js/jquery-1.4.2.js" charset="UTF-8"></script>
<script type="text/javascript" src="js/menu.js" charset="UTF-8"></script>
<link href="css/menu.css" rel="stylesheet" type="text/css">

後は下記のサンプルHTMLに従ってHTMLをコーディングするだけです。

<div id="gwMenu">
	<ul id="gwMainMenu">
		<li><a href="index.html"><img src="[画像のパス]" id="[画像のパスから .jpg を削除したもの]" alt="" width="画像の幅" height="画像の高さ"></a>
		<ul class="gwSubMenu">
			<li><a href="">サブメニュー1</a></li>
			<li><a href="">サブメニュー2</a></li>
	    </ul>
</div>

大切な約束事は下記の点です。

１．メインメニューの画像のロールオーバー（マウスポインタを載せると画像が変わる）について
→　ロールオーバー前の画像が　img.jpg　だとすると、ロールオーバー後の画像は imgRO.jpg という名前にすること。（ファイル名に[RO]をつける。）
→　同じフォルダに保存すること
→　メインメニューのimgタグには幅と高さを指定すること
→　画像はすべて同じ大きさに統一すること

２．サブメニューのスタイルを変更したい場合は「menu.css」の中身の　/*サブメニューのスタイル*/　より下をいじってください。単純な構造です。

３．メインメニューの数はいくつ設置してもらっても大丈夫と思います。（親要素の幅以上は難しいかも）

以上が設置手順です。

ちなみに下記に実装サンプルコードと表示サンプルを記載します。

<div id="gwMenu">
	<ul id="gwMainMenu">
		<li><a href="index.html"><img src="img/menu1.jpg" id="img/menu1" alt="HTML" width="107" height="32"></a>//画像めにゅーを指定（widthとheightは忘れない事)
		<ul class="gwSubMenu">
			<li><a href="index.html">body</a></li> //ドロップダウンするメニューを指定
			<li><a href="index.html">table</a></li>
			<li><a href="index.html">form</a></li>
			<li><a href="index.html">style</a></li>
			<li><a href="index.html">meta</a></li>
		</ul>
		</li>
		<li><a href="index.html"><img src="img/menu2.jpg" id="img/menu2" alt="php" width="107" height="32"></a>
		<ul class="gwSubMenu">
			<li><a href="index.html">zend</a></li>
			<li><a href="index.html">smarty</a></li>
			<li><a href="index.html">cake</a></li>
		</ul>
	  	</li>
		<li><a href="index.html"><img src="img/menu3.jpg" id="img/menu3" alt="javascript" width="107" height="32"></a>
		<ul class="gwSubMenu">
			<li><a href="index.html">jQuery</a></li>
			<li><a href="index.html">prototype</a></li>
			<li><a href="index.html">Rico</a></li>
		</ul>
	  	</li>
		<li><a href="index.html"><img src="img/menu4.jpg" id="img/menu4" alt="css" width="107" height="32"></a>
		<ul class="gwSubMenu">
			<li><a href="index.html">charset</a></li>
			<li><a href="index.html">resetstyle</a></li>
			<li><a href="index.html">id</a></li>
			<li><a href="index.html">class</a></li>
			<li><a href="index.html">Cross-Browser</a></li>
		</ul>
	  	</li>
		<li><a href="index.html"><img src="img/menu5.jpg" id="img/menu5" alt="sql" width="107" height="32"></a>
		<ul class="gwSubMenu">
			<li><a href="index.html">mySQL</a></li>
			<li><a href="index.html">postgreSQL</a></li>
			<li><a href="index.html">SQLite</a></li>
		</ul>
	  	</li>
	</ul>
</div>