..



 ■HomeJavaScriptサンプル集〔インタラクティブ編〕−HPアクセサリー(ツリーメニュー)

JavaScript 無料のフリースクリプト集...
□JavaScript
├□window
│├window.alert
│├window.open
│└window.close
├□navigator
└□DOM
□Sample Program
ツリーメニュー

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




 HPでの使用方法
1.プログラムと画像のダウンロード

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

 プログラムファイル
 treemenu.js


2.<head>〜</head>タグ間の編集

 プログラムを実行するHTMLの<head>〜</head>タグ間に次の赤字の部分を挿入してください。ここからの作業は全てコピー&ペーストでOKです。

<head>・・・
<script type="text/javascript" src="treemenu.js"></script>
・・・</head>


3.<body>タグの編集

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

<body onLoad="treeInit()" ・・・>


4.<body>〜</body>タグ間の編集

 下記を参考にしてツリーメニューをHTMLの< body>〜</body>タグ間に記入してください。<a>タグの#はダミーで同じページのトップにリンクしています。 メニューを実行するとスクロールしすぎてメニューから画面がはずれる場合は、メニュー付近にアンカータグを設置してください。(〔例〕<a name="menu">←これをメニュー付近に設置した場合#の部分は#menuとなります。)

<a href="#" onclick="return treeFunc('メインメニュー1のID')">□メインメニュー1</a><br>
<div class="titem" id="メインメニュー1のID">
├<a href="#" onclick="return treeFunc('サブメニュー1のID')">□サブメニュー1</a><br>
<div class="titem" id="サブメニュー1のID">
│├<a href="URL1-1">サブサブメニュー1−1</a><br>
│├<a href="URL1-2">サブサブメニュー1−2</a><br>
│└<a href="URL1-3">サブサブメニュー1−3</a><br>
</div>
├<a href="#" onclick="return treeFunc('サブメニュー2のID')">□サブメニュー2</a><br>
<div class="titem" id="サブメニュー2のID">
│├<a href="URL2-1">サブサブメニュー2−1</a><br>
│├<a href="URL2-2">サブサブメニュー2−2</a><br>
│└<a href="URL2-3">サブサブメニュー2−3</a><br>
</div>
└<a href="#" onclick="return treeFunc('サブメニュー3のID')">□サブメニュー3</a><br>
<div class="titem" id="サブメニュー3のID">
 ├<a href="URL3-1">サブサブメニュー3−1</a><br>
 ├<a href="URL3-2">サブサブメニュー3−2</a><br>
 └<a href="URL3-3">サブサブメニュー3−3</a><br>
</div>
</div>


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



..


..


..