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

最新の記事

プロフィール

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