▼メニューにマウスオーバーするとヘッダ画像内に収まる固定幅・固定高さの垂直型ドロップダウンメニュー表示されます。
<!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>Emenu | 設置サンプル</title>
<link rel="stylesheet" href="/content/lib/global.css" type="text/css" />
<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="/content/lib/jquery/jquery.emenu.js"></script>
<script type="text/javascript">
$(function(){
$('#menu1').emenu();
});
</script>
<!-- CSS -->
<style type="text/css" media="screen">
/* width and height of the container */
.emenu { width: 640px; height:200px; }
/* content (set the background image here) */
.emenu .menu_content {
background:transparent url(http://farm4.static.flickr.com/3113/3104684709_8daf37d518_o.jpg) no-repeat 0 0; padding:3em 1em 1em 1em; }
/* main menu header */
.emenu ul,
.emenu li { margin:0; padding:0; list-style:none; }
.emenu ul li h2 { font-size:1.2em; }
/* main menu link */
.emenu ul li h2 a { padding:5px; text-decoration:none; font-weight:normal; color:#fff; background-color:#666; border:solid #fff; border-width:0 0 2px 2px; }
/* main menu link hover */
.emenu ul li.hover h2 a { background-color:#ff6699; }
/* drop down menu */
.emenu ul li ul { background-color:#eee; border:solid #fff; border-width:0 2px; }
/* drop down menu section */
.emenu ul li ul li { padding:5px 10px; border-top:solid 1px #fff; }
/* drop down menu section header */
.emenu ul li ul li h3 { font-size:1.2em; }
/* drop down menu section list */
.emenu ul li ul li ul li { font-size:0.9em; padding:0 0 0 15px; margin:5px 0; line-height:1.3em; background:transparent url(/content/img/icon/gray/arrow_next.gif) no-repeat left center; }
/* drop down menu section list links */
.emenu ul li ul li ul li a { color:#ff6699; }
.emenu ul li ul li ul li a:hover { color:#666; }
/* ---- Stuff you shouldn't have to change ---- */
.emenu * { margin:0; padding:0; }
.emenu { overflow:hidden; position:relative; }
.emenu ul { position:absolute; z-index:99; }
.emenu ul li { list-style:none; float:left; }
.emenu ul li.first-child { border:0; }
.emenu ul li ul { overflow:hidden; visibility:hidden; }
.emenu ul li.first-child ul { border-left:0; }
.emenu ul li ul li { float:none; }
.emenu ul li ul li.first-child { border:0; }
.emenu ul li ul li ul { visibility:inherit; position:relative; border:0; }
.emenu ul li ul li ul li { border:0; }
.emenu ul li h2 a { display:block; }
.emenu ul li.first-child h2 a { border-left:none; }
.emenu .menu_content { height:100%; }
</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>
<div id="wrap">
<h1><a href='http://www.chromasynthetic.com/blog/emenu-a-jquery-plugin/'>Emenu</a> | 設置サンプル</h1>
<p>▼メニューにマウスオーバーするとヘッダ画像内に収まる固定幅・固定高さの垂直型ドロップダウンメニュー表示されます。</p>
<!-- CODE -->
<div id="menu1">
<ul>
<li>
<h2><a href="#">> Menu 1</a></h2>
<ul>
<li>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
<li><a href="#">Link 6</a></li>
<li><a href="#">Link 7</a></li>
</ul>
</li>
</ul>
</li>
<li>
<h2><a href="#">> Menu 2</a></h2>
<ul>
<li>
<h3>Section 1</h3>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
</ul>
</li>
<li>
<h3>Section 2</h3>
<ul>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</li>
</ul>
</li>
<li>
<h2><a href="#">> Menu 3</a></h2>
<ul>
<li>
<p>Here are a few links:</p>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</li>
</ul>
</li>
<li>
<h2><a href="#">> Menu 4</a></h2>
<ul>
<li>
<h3>Section 1</h3>
<p>Here are a few links:</p>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<div class="menu_content">
<p><a href="http://www.flickr.com/photos/22559849@N06/3104684709/" title="バニラミルクフラペチーノ@STARBUCKS by php_javascript_room, on Flickr">バニラミルクフラペチーノ@STARBUCKS by php_javascript_room, on Flickr</a></p>
</div>
</div>
<!-- CODE / -->
</div>
</body>
</html>