●ドロップダウンメニュー
  Ver:1.0
  形式:Html
  言語:JavaScript
  環境:IE6(Opera)
  備考:作成ツール化したものはこちら
                      ⇒ V1.0 Download


・概要
  IE6ではドロップダウンメニュー、Operaでは通常のリン
 クとして動くHtmlです。
  JavaScriptはほんの少ししか使用していないので、そ
 れほど難しいソースではないと思います。


・サンプル
  


・スクリプト例
  <html>
  <head>
  <title>ドロップダウンメニュー</title>
  </head>
  <script type="text/javascript">
  var idPrev = "";
  var elmPrev = null;

  function fnOpen( id ){
    fnClose( idPrev );

    document.all.item(id).style.display = "block";
    window.event.srcElement.style.color = "red";
    window.event.srcElement.style.backgroundColor = "black";

    idPrev = id;
    elmPrev = window.event.srcElement;
  }
  function fnClose( id ){
    if( id.length != 0 ){
      document.all.item(id).style.display = "none";
    }

    if( elmPrev != null ){
      elmPrev.style.color = "black";
      elmPrev.style.backgroundColor = "white";
    }
  }
  </script>
  <style type="text/css">
	.menu	{
		 font-size	 : 12pt;
		 display	 : block;
		 color		 : black;
		 background-color: white;
		 text-align	 : center;
		 text-decoration : none;
		 width		 : 100px;
		 border		 : 1px solid black;
		 padding	 : 2px 4px 2px 4px;
		}
	.list	{
		 display	 : none;
		 position	 : absolute;
		 color		 : black;
		 background-color: white;
		 width		 : 100px;
		 border		 : 1px solid black;
		}
	.item	{
		 font-size	 : 12pt;
		 width		 : 100%;
		 text-decoration : none;
		 padding	 : 2px 4px 2px 4px;
		}
	a.item:link{
		 color		 : black;
		}
	a.item:visited{
		 color		 : black;
		}
	a.item:active{
		 color		 : red;
		 background-color: black;
		}
	a.item:hover{
		 color		 : red;
		 background-color: black;
		}
  </style>
  <body onclick="fnClose(idPrev);">

  <table border="0" cellspacing="0px">
  <tr>
  <td><a class="menu"
  		href="http://www.yahoo.co.jp"
  		target="_self"
  		onmouseover="fnOpen('list1');"
		>target_self</a></td>
  <td><a class="menu"
  		href="http://www.yahoo.co.jp"
  		target="_top"
  		onmouseover="fnOpen('list2');"
		>target_top</a></td>
  <td><a class="menu"
  		href="http://www.yahoo.co.jp"
  		target="_blank"
  		onmouseover="fnOpen('list3');"
		>target_blank</a></td>
  </tr>
  <tr>
  <td>
  <div id="list1" class="list"
	onclick="window.event.cancelBubble = true;">
  <a class="item"
	 href="http://www.yahoo.co.jp"
	 target="_self">yahoo</a><br />
  <a class="item"
	 href="http://www.lycos.co.jp"
	 target="_self">lycos</a><br />
  <a class="item"
	 href="http://www.geocities.co.jp"
	 target="_self">geocity</a>
  </div>
  </td>
  <td>
  <div id="list2" class="list"
	onclick="window.event.cancelBubble = true;">
  <a class="item"
	 href="http://www.yahoo.co.jp"
	 target="_top">yahoo</a><br />
  <a class="item"
	 href="http://www.lycos.co.jp"
	 target="_top">lycos</a><br />
  <a class="item"
	 href="http://www.geocities.co.jp"
	 target="_top">geocity</a>
  </div>
  </td>
  <td>
  <div id="list3" class="list"
	onclick="window.event.cancelBubble = true;">
  <a class="item"
	 href="http://www.yahoo.co.jp"
	 target="_blank">yahoo</a><br />
  <a class="item"
	 href="http://www.lycos.co.jp"
	 target="_blank">lycos</a><br />
  <a class="item"
	 href="http://www.geocities.co.jp"
	 target="_blank">geocity</a>
  </div>
  </td>
  </tr>
  </table>

  </body>
  </html>


・カスタマイズ
  見た目を変える場合は、スタイルシート部分を修正してください。
  ただ、最上位項目(サンプルではtarget_selfなどになっている部
 分)のマウスオーバー時の色設定を変更する場合のみ、スクリプト部
 の修正が必要です。

  ・マウスオーバー時の文字色
    window.event.srcElement.style.color = "red";
  ・マウスオーバー時の背景色
    window.event.srcElement.style.backgroundColor = "black";
  ・マウスアウト時の文字色
    elmPrev.style.color = "black";
  ・マウスアウト時の背景色
    elmPrev.style.backgroundColor = "white";


  リンク先やターゲット指定を変更する場合は、itemクラスとな
 っているリンクタグの部分を修正してください。
  展開するリストの内容を変更する場合は、listクラスとなって
 いるdivタグの内容を修正したください。
  最上位項目を追加する場合は、fnOpen関数に渡すIDに注意
 してください。対応する展開リストを追加し、そのIDを指定してく
 ださい。


・履歴
 ・8/20新規 Ver1.0
【 Back 】