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

実行結果

イベント操作:相互作用:hoverの使用例 | jQuery

例:ドロップダウンメニュー

参照:jQuery & CSS Example - Dropdown Menu

設置サンプルのソース

<!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>イベント操作:相互作用:hoverの使用例 | jQuery</title>
      <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
      <script type="text/javascript">
         $(function(){
            $('li.headlink').hover(
               function() { $('ul', this).css('display', 'block'); },
               function() { $('ul', this).css('display', 'none'); });
            });   
      </script>
      <style type="text/css">
         #cssdropdown                  { height:20em; }
         #cssdropdown *                  { list-style:none; margin:0; padding:0; }
         #cssdropdown a                  { color:#eee; text-decoration:none; font-weight:bold; }
         #cssdropdown li.headlink         { width:220px; float:left; margin:10px 0 10px 1px; padding:5px 0 0 0; background:#000 url("/content/img/ajax/line_top.png") repeat-x 0 0; text-align:center; }
         #cssdropdown li.headlink a         { display:block; padding:15px; }
         #cssdropdown li.headlink ul         { background:#000 url("/content/img/ajax/line_btm.png") repeat-x bottom left; display:none; }
         #cssdropdown li.headlink ul li      { border-top:1px solid #fff; text-align:left; }
         #cssdropdown li.headlink ul li img   { margin:0 5px 0 20px; vertical-align:middle; }
      </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>
<h3 class='h'>実行結果</h3>
      <div id="wrap">
         <h1>イベント操作:相互作用:hoverの使用例 | jQuery</h1>
         <h2>例:ドロップダウンメニュー</h2>
         <p>参照:<a href='http://designreviver.com/tutorials/jquery-css-example-dropdown-menu/'>jQuery & CSS Example - Dropdown Menu</a></p>
<!-- CODE -->
         <ul id="cssdropdown" class="cf">
            <li class="headlink">
               <a href="#" onclick="return false;">検索エンジン</a>
               <ul>
                  <li><a href="http://www.google.co.jp/"><img src="/content/img/icon/ico_google.png" />Google</a></li>
                  <li><a href="http://www.yahoo.co.jp/"><img src="/content/img/icon/ico_yahoo.gif" />Yahoo</a></li>
                  <li><a href="http://www.live.com/"><img src="/content/img/icon/ico_msn.gif" />Live Search</a></li>
               </ul>
            </li>
            <li class="headlink">
               <a href="#" onclick="return false;">ブラウザ</a>
               <ul>
                  <li><a href="http://mozilla.jp/firefox/"><img src="/content/img/icon/ico_mozilla.gif" />Firefox</a></li>
                  <li><a href="http://www.microsoft.com/japan/windows/products/winfamily/ie/default.mspx"><img src="/content/img/icon/ico_ie7.gif" />Internet Explorer</a></li>
                  <li><a href="http://www.apple.com/jp/safari/"><img src="/content/img/icon/ico_safari.gif" />Safari</a></li>
                  <li><a href="http://www.fenrir.co.jp/sleipnir/"><img src="/content/img/icon/ico_sleipnir.png" />Sleipnir</a></li>
               </ul>
            </li>
         </ul>
<!-- / CODE -->
      </div>
   </body>
</html>