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

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

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

<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ライブラリjQueryで簡単サブメニュー「Horizontal Subnav with CSS」サンプル

sponsors

「JavaScriptライブラリjQueryで簡単サブメニュー「Horizontal Subnav with CSS」」をシェアする

記事作成:
記事URL:

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