jQuery 多階層ドロップダウンメニュー
jQueryで多階層ドロップダウンメニューを生成
jQuery
$(function () {
// 親メニュー処理
$('span').click(function() {
$('ul').hide();
$('li').removeClass('selected');
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');
}
});
// 子メニュー処理
$('li').click(function(e) {
if ($(this).attr('class') == 'selected') {
// メニュー非表示
$(this).removeClass('selected').children('ul').animate({
width: 'hide'
}, 'fast');
} else {
// 表示しているメニューを閉じる
$('li').removeClass('selected');
$('li ul').hide();
// メニュー表示
var menu_top = $(this).offset().top - $('#menu').offset().top - 20;
$(this).addClass('selected').children('ul').css({
'top': menu_top,
'left': '100px'
}).animate({
width: 'toggle'
}, '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;
}
li {
cursor: pointer;
}
HTML
<div id="menu">
<div>
<span>メニュー 1</span>
<ul>
<li>メニュー 1-1
<ul>
<li><a href="#">メニュー 1-1-1</a><li>
<li><a href="#">メニュー 1-1-2</a></li>
</ul>
</li>
<li>メニュー 1-2
<ul>
<li><a href="#">メニュー 1-2-1</a><li>
<li><a href="#">メニュー 1-2-2</a></li>
</ul>
</li>
<li>メニュー 1-3
<ul>
<li><a href="#">メニュー 1-3-1</a><li>
<li><a href="#">メニュー 1-3-2</a></li>
</ul>
</li>
</ul>
</div>
<div>
<span>メニュー 2</span>
<ul>
<li>メニュー 2-1
<ul>
<li><a href="#">メニュー 2-1-1</a><li>
<li><a href="#">メニュー 2-1-2</a><li>
<li><a href="#">メニュー 2-1-3</a><li>
</ul>
</li>
<li>メニュー 2-2
<ul>
<li><a href="#">メニュー 2-2-1</a><li>
<li><a href="#">メニュー 2-2-2</a><li>
<li><a href="#">メニュー 2-2-3</a><li>
</ul>
</li>
<li>メニュー 2-3
<ul>
<li><a href="#">メニュー 2-3-1</a><li>
<li><a href="#">メニュー 2-3-2</a><li>
<li><a href="#">メニュー 2-3-3</a><li>
</ul>
</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>
サンプル
