jQuery ドロップダウンメニュー

Category
： Javascript

input内のテキスト表示しfocusするjQueryプラグイン

ナビゲーションにマウスオーバーした際にドロップダウン式にサブメニューみたいな感じで表示してくれる jQuery のプラグインです。

ダウンロード・使い方

head内

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/yuga.js"></script>
<script type="text/javascript" src="js/jquery.droppy.js"></script>
<script type="text/javascript">
    $(function() {
  	  $("#nav").droppy();
    });
</script>

※ yuga.js は画像のロールオーバーのみで使ってます。

帯上のbackground指定

#globalNavi	{ background: url(image/navi.jpg) repeat-x; height: 28px; padding-top: 7px; text-align: center; }

#nav 、#nav li 指定

忘れずにposition:relative;をかけておきましょう。

#nav { width: 900px; margin: 0 auto; position: relative; line-height:1; text-align: left; }
#nav li { list-style: none; float: left; position: relative; }

プルダウンに表示される部分共通指定

#nav ul { display: none; position: absolute; top: 29px; left: 0; }
* html #nav ul { line-height: 0; }
#nav ul li { float: none; }

#nav ul { width: 120px; }

#nav ul a { 
	display: block;
	width: 108px;
	background:#121212;
	padding: 6px;
	color: #FFF;
	border-bottom: 1px solid #FFF;
	opacity: 0.7;
	filter: alpha(opacity=70);
	zoom: 1;
	line-height: 1;
}
#nav ul a.hover { background: #444; }

※マウスオーバー時にclass="hover"とつく用になっております。