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>

サンプル

最新の記事

プロフィール

流されるままにウェブ業界で仕事しています。
主にLAPP環境でPHPを書いています。
最近はjQueryをよく書いています。