プルダウンメニューを作る。 - javascriptを始める。

出来上がりはこんな感じ。
f:id:nodajin777:20120517165728p:plain
⬇親要素をクリックして開くと...
f:id:nodajin777:20120517165639p:plain

説明とソース

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>プルダウンメニューを作る</title>
  </head>
  <body>
    <h1>プルダウンメニュー</h1>
    <div style="display:none;" onclick="clickMenu(event,this);">
      親メニュー１
      <div style="display:none;" onclick="clickMenu(event,this);">
        子メニュー１
        <div style="display:none;" onclick="clickMenu(event,this);">
          孫メニュー１
        </div>
      </div>
    </div>
    <div style="display:none;" onclick="clickMenu(event,this);">
      親メニュー２
      <div style="display:none;" onclick="clickMenu(event,this);">
        子メニュー２
        <div style="display:none;" onclick="clickMenu(event,this);">
          孫メニュー２
        </div>
      </div>
    </div>
    <div style="display:none;" onclick="clickMenu(event,this);">
      親メニュー３
      <div style="display:none;" onclick="clickMenu(event,this);">
        子メニュー３
        <div style="display:none;" onclick="clickMenu(event,this);">
          孫メニュー３
        </div>
      </div>
    </div>
    <script type="text/javascript">
//クリックされたメニューの子メニューを表示するための関数。
      function clickMenu(event,menu) {
        var childMenu = null;
//クリックされたメニューに子メニューが存在する場合。
        if (menu.childNodes.length > 1) {
//クリックされたメニューの子メニューを参照する。
          childMenu = menu.childNodes[1];
//子メニューが非表示の場合。
          if (childMenu.style.display == "none") {
//子メニューを表示する。
            childMenu.style.display = "block";
          }
//子メニューが表示済みの場合。
          else {
//子メニューを非表示にする。
            childMenu.style.display = "none";
          }
        }
//イベント伝播を中止する。
        if (navigator.appName.indexOf("Microsoft") > -1) {
          event.cancelBubble = true;
        } else {
          event.stopPropagation();
        }
      }
    </script>
  </body>
</html>