PHP & JavaScript Room :: 設置サンプル

設置サンプル

実行結果

Emenu | 設置サンプル

▼メニューにマウスオーバーするとヘッダ画像内に収まる固定幅・固定高さの垂直型ドロップダウンメニュー表示されます。

設置サンプルのソース

<!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 &amp; 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="#">&gt; 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="#">&gt; 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="#">&gt; 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="#">&gt; 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>