▼リスト要素からドロップダウンメニューを生成
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>jQuery Simple Drop-Down Menu Plugin | 設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" media="all" />
<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;
function jsddm_open(){
jsddm_canceltimer();
jsddm_close();
ddmenuitem=$(this).find('ul').eq(0).css('visibility', 'visible');
}
function jsddm_close(){
if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');
}
function jsddm_timer(){
closetimer=window.setTimeout(jsddm_close, timeout);
}
function jsddm_canceltimer(){
if(closetimer){
window.clearTimeout(closetimer);
closetimer = null;
}
}
$(function(){
$('#jsddm > li').bind('mouseover', jsddm_open);
$('#jsddm > li').bind('mouseout', jsddm_timer);
});
document.onclick=jsddm_close;
});
</script>
<!-- CSS -->
<style type="text/css">
#demo { height:15em; }
#jsddm { margin:0; padding:0; }
#jsddm li { float:left; list-style:none; }
#jsddm li a { display:block; background:#999; padding:5px 12px; text-decoration:none; border-right:1px solid #fff; width:70px; color:#eaffed; white-space:nowrap; font-weight:bold; }
#jsddm li a:hover { background:#ff6699; }
#jsddm li ul { margin:0; padding:0; position:absolute; visibility:hidden; border-top:1px solid #fff; }
#jsddm li ul li { float:none; display:inline; }
#jsddm li ul li a { width:auto; background:#fff; color:#ff6699; font-weight:normal; }
#jsddm li ul li a:hover { background:#ff6699; color:#fff; }
</style>
<link rel="stylesheet" type="text/css" href="/common/css/example.css"></head>
<body id='example3' class='example'><div class="ads" style="margin:32px auto;text-align:center;"></div><h1 class='h'><a href='/'>PHP & JavaScript Room</a> :: 設置サンプル</h1>
<h3 class='h'>実行結果</h3>
<h1><a href='http://javascript-array.com/scripts/jquery_simple_drop_down_menu/'>jQuery Simple Drop-Down Menu Plugin</a> | 設置サンプル</h1>
<p>▼リスト要素からドロップダウンメニューを生成</p>
<!-- CODE -->
<div id="demo" class="cf">
<ul id="jsddm">
<li><a href="#">MenuA</a>
<ul>
<li><a href="#">Item A ------ 1</a></li>
<li><a href="#">Item A ------ 2</a></li>
<li><a href="#">Item A ------ 3</a></li>
</ul>
</li>
<li><a href="#">MenuB</a>
<ul>
<li><a href="#">Item B ------ 1</a></li>
<li><a href="#">Item B ------ 2</a></li>
<li><a href="#">Item B ------ 3</a></li>
<li><a href="#">Item B ------ 4</a></li>
<li><a href="#">Item B ------ 5</a></li>
</ul>
</li>
<li><a href="#">MenuC</a></li>
<li><a href="#">MenuD</a></li>
<li><a href="#">MenuE</a></li>
</ul>
</div>
<!-- / CODE -->
</body>
</html>