クリックするとツリーメニューを表示する(複数:フラット:Safari, NN対応版)


動作ブラウザ 【 IE:5.0  NN:6.0
Internet Explorer Netscape Navigator DreamPassport iCab
3.0x 4.0x 4.5 5.0x 5.5 6.0 2.0x 3.0x 4.0x 4.x 6.0 2 3 2.x
Windows × × - × × × × - × -
Macintosh × × × - - × × × × - - ×
UNIX - - - - - - × × × × - - -
Dreamcast - - - - - - - - - - × × -

ポイント tMenu = document.getElementById(tName).style; if (tMenu.display == 'none') tMenu.display = "block"; else tMenu.display = "none"; <a href="javaScript:exMenu('treeMenu1')">〜</a> <div id="treeMenu1" style="display:none">〜</div> <a href="javaScript:exMenu('treeMenu2')">〜</a> <div id="treeMenu2" style="display:none">〜</div>
説  明 ツリーメニュー(Explorerのような階層表示型メニュー)はスタイルシートのdisplayプロパティを操作することで簡単に実現できます。表示しない場合はdisplayにnoneを、表示する場合はblockを設定します。複数のツリーメニューにする場合はdivタグのid名が同じにならないように気を付けてください。また、<a href="javaScript:exMenu('treeMenu1')">でtreeMenu1となっている部分のidが正しくdivタグで指定したidと対応するようにしてください。Safari, Netscape, OperaのようにDOMに対応したブラウザではdocument.getElementById(tName)を使うことでページ上のポブジェクトを指定することができます。
サンプル <html> <head> <title>クリックするとツリーメニューを表示する(複数:フラット:Safari, NN対応版)</title> <script Language="JavaScript"><!-- function exMenu(tName) { tMenu = document.getElementById(tName).style; if (tMenu.display == 'none') tMenu.display = "block"; else tMenu.display = "none"; } // --></script> </head> <body bgcolor="white"> <a href="javaScript:exMenu('treeMenu1')">+</a>■検索サイト<br> <div id="treeMenu1" style="display:none"> ├<a href="http://www.yahoo.co.jp/">Yahoo!</a><br> ├<a href="http://www.goo.ne.jp/" >Goo</a><br> └<a href="http://www.lycos.co.jp/">Lycos</a><br> </div> <a href="javaScript:exMenu('treeMenu2')">+</a>■検索サイト2<br> <div id="treeMenu2" style="display:none"> ├<a href="http://www.infoseek.co.jp/">Infoseek</a><br> ├<a href="http://www.google.com/" >Google</a><br> └<a href="http://kids.goo.ne.jp/">Kids Goo</a><br> </div> </body> </html>
補足説明 なし

■サンプルスクリプトを実行する >>実行
■各ブラウザでの動作結果を見る >>View!

写真素材 PIXTA