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