jQuery naviDropDownプラグイン
次は、jQuery naviDropDownプラグインです。こちらはメニュー上にマウスオーバーすると、ドロップダウンメニューが表示されるプラグインです。
例えば、図3の上部に表示されている『「△△△△△△グラフ」はこちらをご覧ください。』のように［こちら］部分のリンクをマウスオーバーすると、遷移先のページをポップアップ表示できます。
図3 jQuery naviDropDownプラグイン適用前
図4 jQuery naviDropDownプラグイン適用後
Brandammoのサイトからjquery.naviDropDown.v1.0.zipをダウンロードし、解凍後、pluginフォルダに配置します。
リスト2に、jQuery naviDropDownプラグインの使用例を示します。
［リスト2］jQuery naviDropDownプラグインの使用例（jQueryPlugin_effect_Sample_after.html）
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQueryプラグイン（effect) サンプル</title>
<!--1.jQueryの読み込み-->
<script type="text/javascript" src="Scripts/jquery-1.5.2.min.js"></script>
<!--2.プラグインの読み込み-->
（中略）
<script type="text/javascript" src="plugins/jquery.naviDropDown.v1.0/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="plugins/jquery.naviDropDown.v1.0/jquery.hoverIntent.minified.js"></script>
<script type="text/javascript" src="plugins/jquery.naviDropDown.v1.0/jquery.naviDropDown.1.0.js"></script>
（中略）
<!--3.CSSの設定-->
<style type="text/css">
（中略）
.style2
{
text-decoration: underline;
}
（中略）
</style>
<!--4.プラグインの設定-->
<script type="text/javascript">
$(function () {
（中略）
$('#navigation_horiz').naviDropDown({ dropDownWidth: '600px' });
（中略）
});
</script>
</head>
<body>
<h1>jQueryプラグイン（effect) サンプル</h1>
（中略）
<div id="navigation_horiz">
<ul style="list-style:none">
<li>「△△△△△△グラフ」は<span class="style2">こちら</span>をご覧ください。
<div class="dropdown">
<img border="0" src="./images/graph.png" width="600" height="380" alt="△△△△△△グラフ" />
</div>
</li>
</ul>
</div>
<h2>住所によるグループ検索</h2>
<ul>
<li>都道府県から探す</li>
</ul>
<div id="dock">
（中略）
</div>
</body>
</html>
jQuery naviDropDownプラグインの使用方法は、jquery.easing.1.3.js、jquery.hoverIntent.minified.js、jquery.naviDropDown.1.0.jsを読み込み、「4.プラグインの設定」のように表示領域のid属性を指定して、naviDropDownメソッドを用います。引数にはdropDownWidthでドロップダウン時の高さを指定します。
また、表示領域の中で、class属性をdropdownと指定した中で、マウスオーバー時に表示させるオブジェクトを設定します。サンプルでは、グラフを表示させたいので、imgタグを使用しています。
