クリックするとツリーメニューを表示する


動作ブラウザ 【 IE:4.0  NN:-
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.all[tName].style; if (tMenu.display == 'none') tMenu.display = "block"; else tMenu.display = "none"; <a href="javaScript:exMenu('treeMenu')"> <div id="treeMenu" style="display:none">
説  明 ツリーメニュー(Explorerのような階層表示型メニュー)はスタイルシートのdisplayプロパティを操作することで簡単に実現できます。表示しない場合はdisplayにnoneを、表示する場合はblockを設定します。divタグを入れ子にすることで複雑なツリーメニューも簡単に実現できます。
サンプル <html> <head> <title>クリックするとツリーメニューを表示する</title> <script Language="JavaScript"><!-- function exMenu(tName) { tMenu = document.all[tName].style; if (tMenu.display == 'none') tMenu.display = "block"; else tMenu.display = "none"; } // --></script> </head> <body bgcolor="white"> <a href="javaScript:exMenu('treeMenu')">+</a>■検索サイト<br> <div id="treeMenu" 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> </body> </html>
補足説明 なし

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

写真素材 PIXTA