..
　■Home−JavaScriptサンプル集−HPアクセサリー−ツリーメニュー
+1JavaScript　無料のフリースクリプト集...
□JavaScript
├□window
│├□window.alert
│├□window.open
│└□window.close
├□navigator
└□DOM
□Sample Program
 ◇ツリーメニュー

　ツリーメニューがあればコンテンツが多くてもHPがすっきりします。クリックするとサブツリーが開きもう一度クリックするとツリーが閉じます。
　◎このコードは『とほほのWWW入門』を参考にさせてもらいました

　ＨＰでの使用方法
◇１．プログラムと画像のダウンロード

　プログラムを実行するHTMLと同じフォルダにプログラムをダウンロードして下さい。サーバーにアップする時も同じフォルダに入れて下さい。次のリンクを右クリックして「対象をファイルに保存」を選ぶとダウンロードできます。
　プログラムファイル
 　treemenu.js


◇２．<head>〜</head>タグ間の編集

　プログラムを実行するHTMLの<head>〜</head>タグ間に次の赤字の部分を挿入してください。ここからの作業は全てコピー＆ペーストでOKです。
<head>・・・
<script type="text/javascript" src="treemenu.js"></script>
・・・</head>


◇３．<body>タグの編集

　プログラムを実行するHTMLの<body>タグに次の赤字の部分を挿入してください。
<body onLoad="treeInit()" ・・・>


◇４．<body>〜</body>タグ間の編集

　下記を参考にしてツリーメニューをHTMLの< body>〜</body>タグ間に記入してください。<a>タグの#はダミーで同じページのトップにリンクしています。 メニューを実行するとスクロールしすぎてメニューから画面がはずれる場合は、メニュー付近にアンカータグを設置してください。（〔例〕<a name="menu">←これをメニュー付近に設置した場合#の部分は#menuとなります。）
<a href="#" onclick="return treeFunc('メインメニュー１のID')">□メインメニュー１</a><br>
<div class="titem" id="メインメニュー１のID">
├<a href="#" onclick="return treeFunc('サブメニュー１のID')">□サブメニュー１</a><br>
<div class="titem" id="サブメニュー１のID">
│├<a href="URL1-1">□サブサブメニュー１−１</a><br>
│├<a href="URL1-2">□サブサブメニュー１−２</a><br>
│└<a href="URL1-3">□サブサブメニュー１−３</a><br>
</div>
├<a href="#" onclick="return treeFunc('サブメニュー２のID')">□サブメニュー２</a><br>
<div class="titem" id="サブメニュー２のID">
│├<a href="URL2-1">□サブサブメニュー２−１</a><br>
│├<a href="URL2-2">□サブサブメニュー２−２</a><br>
│└<a href="URL2-3">□サブサブメニュー２−３</a><br>
</div>
└<a href="#" onclick="return treeFunc('サブメニュー３のID')">□サブメニュー３</a><br>
<div class="titem" id="サブメニュー３のID">
　├<a href="URL3-1">□サブサブメニュー３−１</a><br>
　├<a href="URL3-2">□サブサブメニュー３−２</a><br>
　└<a href="URL3-3">□サブサブメニュー３−３</a><br>
</div>
</div>


<a href="#" onclick="return treeFunc('メインメニュー２のID')">□メインメニュー２</a><br>
<div class="titem" id="メインメニュー２のID">
├<a href="URL1">□サブメニュー１</a><br>
├<a href="URL2">□サブメニュー２</a><br>
└<a href="URL3">□サブメニュー３</a><br>
</div>


..

..


..