クリックするとツリーメニューを表示する(入れ子/ネスト)


動作ブラウザ 【 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('treeMenu1')">〜</a> <div id="treeMenu1" style="display:none"> <a href="javaScript:exMenu('treeMenu2')">〜</a> <div id="treeMenu2" style="display:none">〜</div> </div>
説  明 ツリーメニュー(Explorerのような階層表示型メニュー)はスタイルシートのdisplayプロパティを操作することで簡単に実現できます。表示しない場合はdisplayにnoneを、表示する場合はblockを設定します。複数の入れ子ツリーメニューにする場合はdivタグの中にdivタグを入れていきます。(入れ子/ネスト)  この時id名が同じにならないように気を付けてください。また、<a href="javaScript:exMenu('treeMenu1')">でtreeMenu1となっている部分のidが正しくdivタグで指定したidと対応するようにしてください。
サンプル <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"> ■検索サイト<br> <a href="javaScript:exMenu('treeMenu1')">+</a>■検索サイト1<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> └<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> </div> </body> </html>
補足説明 なし

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

写真素材 PIXTA