JavaScriptライブラリjQueryで簡単サブメニュー「Horizontal Subnav with CSS」

マウスがメニューに乗った時にそのカテゴリのサブメニューを表示させるテクニックがあります。
JavaScriptライブラリのjQueryを使用すると簡単に実現可能です。
via:Horizontal Sub-nav with CSS & jQuery - Subnavigation Tutorial - CSS Tutorial - jQuery Tutorial

sponsors

サンプル

まず以下のようなメニュー部分を記述します。

<ul id="topnav">
        <li><a href="#">Home</a></li>
        <li>
			<a href="#">About</a>
			<span>
			<a href="#">The Company</a> |
			<a href="#">The Team</a> |
			<a href="#">Careers</a>
		</span>
	</li>
</ul>
※この場合aboutの下のspanがサブメニューにあたります。
スタイルはこんな感じです。

ul#topnav {
	margin: 0; padding: 0;
	list-style: none;
	position: relative;
	font-size: 1.2em;
	background: #151515;
}
ul#topnav li {
	float: left;
	margin: 0; padding: 0;
	border-right: 1px solid #555;
}
ul#topnav li a {
	padding: 10px 15px;
	display: block;
	color: #f0f0f0;
	text-decoration: none;
}
ul#topnav li:hover { background: #1376c9; }
これでは、見た目が悪いので、以下のように追加します。

ul#topnav li span {
	float: left;
	padding: 15px 0;
	position: absolute;
	left: 0;
	top:35px;
	display: none;
	background: #1376c9;
	color: #fff;
}
ul#topnav li:hover span { display: block; }
ul#topnav li span a { display: inline; }
ul#topnav li span a:hover {text-decoration: underline;}
ここでは、サブメニューのli spanをabsoluteしてメインメニューの下に配置します。
また、見えなくするため、display:none;としています。
最後にこの隠したサブメニューをjsで表示させれば完成です。
要:jQuery

<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$("ul#topnav li").hover(function() {
	 //メインメニュー(#topnavi li)にマウスが乗った時
		$(this).css({ 'background' : '#1376c9'}); //その要素の背景色を変える
		$(this).find("span").show();  //サブメニューを表示
		} , function() {
		$(this).css({ 'background' : 'none'}); //背景色を戻す
		$(this).find("span").hide(); //サブメニュー隠す
	});
});
</script>

サンプル

Javascriptサンプルページ一覧
skuare.net