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

クチコミサイト構築「エディタ・エンタープライズ」
デモサイトトップ
制作技術
JavascriptライブラリjQueryで簡単サブメニュー「Horizontal Subnav with CSS」

クチコミサイト構築「エディタ・エンタープライズ」デモサイト

日本初のブログ自動収集システム「エディタ・エンタープライズ」により、簡単・低コスト・SEO対策が可能な口コミサイトが構築可能です。
ブロガー別の記事一覧やカテゴリ別、月別、取得画像別などさまざまな切り口で見せることができるので、映画や商品のキャンペーンをはじめ、テーマ別のポータルサイトを構築できます。

2009年09月11日｜記事提供：すくえあ

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

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



        Home


        

			About

			

			The Company |

			The Team |

			Careers

※この場合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;}