JavaScript + Ajax 実践サンプル集

ドロップダウンメニュー(2)

説明コード分割コードコメント投稿

このサンプルは、ドロップダウン型のメニューを表示します。マウスをトップメニューに移動するとサブメニューが表示されます。このサンプルは、<table>タグを使用してメニューを宣言しています。メニュー項目は<td>タグ内に宣言します。

メルマガ登録！ (ドラッグ＆リサイズ可)

苗字
メール

このメルマガを購読すると、新着サンプルの情報を受け取ることができます。「苗字」と「メールアドレス」を入力したら[登録]ボタンをクリックしてください。このウィンドウは、任意の場所に移動したりリサイズすることができます。

<html>
<head>
<title>Drop Down Menu 2</title>
<style type="text/css">
body {
  font-family:arial;
}

a {
  color:black;
  text-decoration:none;
  font:bold;
}

a:hover { 
  color:#606060;
}

table {
  font-size:80%;
  background:black;
}
tr.topmenu {
  background-color:#FF8080; /* lightblue; */
}

table.menu {
  font-size:100%;
  position:absolute;
  visibility:hidden;
  background:black;
}
td.menu{ 
  background:#FF8080; /* lightblue; */
}

</style>
<script type="text/javascript">
window.onload = function() {
  var tdList = document.getElementsByTagName("td");
  for(var i=0; i<tdList.length;i++) {
    if (tdList[i].id != "") {     
      tdList[i].onmouseover = showmenu;
      tdList[i].onmouseout = hidemenu;
    }
  }
}

function showmenu() {
  var elemId = this.id.substr(3); // search, browser  
  var elem = document.getElementById(elemId);
  elem.style.visibility = "visible";
}

function hidemenu() {
  var elemId = this.id.substr(3); // search, browser   
  var elem = document.getElementById(elemId);
  elem.style.visibility = "hidden";
}
</script>
</head>
<body>
<table>
<tr class="topmenu">
  <td id="topsearch" width="120px">
    <a href="#">Search</a><br />
    <table id="search" class="menu" width="120px">
      <tr><td class="menu"><a href="http://www.google.co.jp/">Google</a></td></tr>
      <tr><td class="menu"><a href="http://www.yahoo.co.jp/">Yahoo!</a></td></tr>
      <tr><td class="menu"><a href="http://www.msn.co.jp/">MSN</a></td></tr>
    </table>
  </td>
  <td id="topbrowser" width="120px">
    <a href="#">Browser</a><br />
    <table id="browser" class="menu" width="120">
      <tr><td class="menu"><a href="http://www.microsoft.com/japan/windows/products/winfamily/ie/default.mspx">Internet Explorer</a></td></tr>
      <tr><td class="menu"><a href="http://www.mozilla-japan.org/products/firefox/">Firfox</a></td></tr>
      <tr><td class="menu"><a href="http://www.apple.com/jp/safari/">Safari</a></td></tr>
   </table>
  </td> 
</tr>
</table>
</body>
</html>

外部スクリプトCSS部HEAD部BODY部

ボックス内のコードを外部ファイル(*.js)、またはHTMLドキュメントの<HEAD>セクションの<script>タグ内にコピー＆ペーストしてください。

            
window.onload = function() {
  var tdList = document.getElementsByTagName("td");
  for(var i=0; i<tdList.length;i++) {
    if (tdList[i].id != "") {     
      tdList[i].onmouseover = showmenu;
      tdList[i].onmouseout = hidemenu;
    }
  }
}

function showmenu() {
  var elemId = this.id.substr(3); // search, browser  
  var elem = document.getElementById(elemId);
  elem.style.visibility = "visible";
}

function hidemenu() {
  var elemId = this.id.substr(3); // search, browser   
  var elem = document.getElementById(elemId);
  elem.style.visibility = "hidden";
}

このサンプルを編集して試してみる!

jQueryを使い倒せ! jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中...

ドロップダウンメニュー(2)