▼メニューにマウスオーバーするとヘッダ画像内に収まる固定幅・固定高さの垂直型ドロップダウンメニュー表示されます。
<!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> <h2 class='h'>設置サンプル</h2> <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>