jQuery ドロップダウンメニュー
jQueryでドロップダウンメニューを生成
jQuery
$(function () {
$('span').click(function() {
if ($(this).attr('class') == 'selected') {
// メニュー非表示
$(this).removeClass('selected').next('ul').slideUp('fast');
} else {
// 表示しているメニューを閉じる
$('span').removeClass('selected');
$('ul').hide();
// メニュー表示
$(this).addClass('selected').next('ul').slideDown('fast');
}
});
// マウスカーソルがメニュー上/メニュー外
$('span,ul').hover(function(){
over_flg = true;
}, function(){
over_flg = false;
});
// メニュー領域外をクリックしたらメニューを閉じる
$('body').click(function() {
if (over_flg == false) {
$('span').removeClass('selected');
$('ul').slideUp('fast');
}
});
});
CSS
#menu div {
position: relative;
}
span {
cursor: pointer;
}
ul {
display: none;
position: absolute;
}
HTML
<div id="menu">
<div>
<span>メニュー 1</span>
<ul>
<li><a href="#">メニュー 1-1</a></li>
<li><a href="#">メニュー 1-2</a></li>
<li><a href="#">メニュー 1-3</a></li>
</ul>
</div>
<div>
<span>メニュー 2</span>
<ul>
<li><a href="#">メニュー 2-1</a></li>
<li><a href="#">メニュー 2-2</a></li>
<li><a href="#">メニュー 2-3</a></li>
</ul>
</div>
<div>
<span>メニュー 3</span>
<ul>
<li><a href="#">メニュー 3-1</a></li>
<li><a href="#">メニュー 3-2</a></li>
<li><a href="#">メニュー 3-3</a></li>
</ul>
</div>
</div>
サンプル
サンプルをiframeで表示しているため、メニュー領域外はサンプルの枠内のみ。
