フォーラム@nifty | フォーラム・サークル | サイトマップ | ヘルプ |
掲示板 コラム お役立ち イベント リンク   | FHPGサイトマップ | お問い合わせ |
TOP > お役立ち > JavaScriptのおもちゃ箱 > レイヤを使ったプルダウンメニュー  

レイヤを使ったプルダウンメニュー

原案:平井 公大 氏 (2000/09/24 登録)

 選択ボックスではなく、レイヤを使ったプルダウンメニューです。クリックするとメニューを表示し、またクリックするとメニューを閉じます。 

表示サンプル

ソース記述内容

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<title>レイヤを使ったプルダウンメニュー</title>
<script type="text/javascript">
<!--

function DM(tag) {

 if ( document.getElementById ) {
    if ( document.getElementById(tag).style.visibility == "hidden" )
        document.getElementById(tag).style.visibility = "visible";
          else document.getElementById(tag).style.visibility = "hidden";
  }

 if ( document.layers ) {
   if ( document.layers[tag].visibility == "hide" )
    document.layers[tag].visibility = "show";
       else document.layers[tag].visibility= "hide";
  }
}

// -->
</script>
<style type="text/css">
<!--
a.pdown:link {
	font-size: 12px;
	text-decoration:none;
	color: #FFFFFF;
}
a.pdown:visited {
	font-size: 12px;
	text-decoration:none;
	color: #FFFFFF;
}
a.pdown:active {
	font-size: 12px;
	text-decoration:none;
	color: #FF0000;
}
a.pdown:hover {
	font-size: 12px;
	text-decoration:none;
	color: #990000;
}

td.menu {
  line-heihgt:1.3em;
}
-->
</style>
</head>
<body>
<div style="text-align: center; height:70px">
  <div style="position:absolute; left:210px; top:350px; width:100px; background-color:#000000; 
              text-align:center; padding:2px; margin:0em" id="menu1"> 
    <a href="../../event/script/s.htm" class="pdown" onClick="DM('tag1'); return false;">リンクA</a> 
  </div>
  <div style="position:absolute; left:320px; top:350px; width:100px; background-color:#000000; 
              text-align:center; padding:2px; margin:0em" id="menu2"> 
    <a href="../../event/script/s.htm" class="pdown" onClick="DM('tag2'); return false;">リンクB</a> 
  </div>
  <div id="tag1" style="position: absolute; left:210px; top:370px; width:100px; visibility:hidden; 
                        background-color:#000000; text-align:center; margin:0em"> 
    <table bgcolor="#000000" width="100" cellpadding="2">
      <tr>
        <td align="center" class="menu"><a href="fhpg.htm" class="pdown">リンクA1</a><br> 
          <a href="fhpg.htm" class="pdown">リンクA2</a><br>
          <a href="fhpg.htm" class="pdown">リンクA3</a><br> 
        </td>
      </tr>
    </table>
  </div>
  <div id="tag2" style="position:absolute; left:320px; top:370px; width:100px; visibility:hidden; 
                        background-color:#000000; text-align:center; margin:0em"> 
    <table bgcolor="#000000" width="100" cellpadding="2">
      <tr>
        <td align="center" class="menu"><a href="fhpg.htm" class="pdown">リンクB1</a><br> 
          <a href="fhpg.htm" class="pdown">リンクB2</a><br>
          <a href="fhpg.htm" class="pdown">リンクB3</a><br> 
        </td>
      </tr>
    </table>
  </div>
</div>
</body>
</html>
個人情報保護ポリシー
Copyright© NIFTY 2006 All Rights Reserved.
Copyright© FHPG 2006 All Rights Reserved.