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で表示しているため、メニュー領域外はサンプルの枠内のみ。

最新の記事

プロフィール

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