簡単でシンプルなツリーメニュー
今回も簡単に使えるツリーメニューです。（またかよ!)
今回のツリーメニューはツリーメニューと
ほぼ同じでidの指定が不要です。
そのため、こちらのツリーメニューの方が初心者には扱い易いだろうと思います。
また、超簡単ツリーメニューよりもシンプルな
スクリプトで動作します。
（自動で閉じたりなどは出来ないため機能的には劣りますが）
サンプルです。（メニュー１のリンク先はありません）
ツリーメニューを動作させるための JavaScript です。
<head>〜</head>の中に置いてください。
<script type="text/javascript"><!--
if (document.getElementById)
document.write('<style type="text/css">
.tree { display: none; } <'+'/style>');
function simple_tree(elm) {
var tree=elm.parentNode.getElementsByTagName("div")[0];
if (tree.style.display == "block") tree.style.display="none";
else tree.style.display="block";
}
// --></script>
if (document.getElementById)
document.write('<style type="text/css">
.tree { display: none; } <'+'/style>');
この部分はスタイルシートをstyle要素ごと書き出すようにしてあり、
.tree { display: none; }
の規則でツリーメニューの表示される内容を非表示としています。
これによりJavaScriptが無効な環境や対応していないブラウザではツリーを展開した
状態で表示されるようになります。
a要素のタグのonclickイベント simple_tree(this); の this によりクリックの
発生したa要素が function simple_tree(elm) { } 内の変数elmに代入されます。
var tree=elm.parentNode.getElementsByTagName("div")[0];
そして、変数treeにはelmの親要素（クラスtree_menuのdiv）の中の一番最初のdiv要素
（クラスtreeのdiv）がセットされ、
if (tree.style.display == "block") tree.style.display="none";
else tree.style.display="block";
treeのスタイルを表示なら非表示、非表示なら表示となるよう切り替える仕組みです。
因みに少し複雑になりますが、自閉式ツリーメニュー
と同じく既に開いてあるメニューは自動で閉じるようにしたい場合は
こちらのスクリプトを、
また、入れ子にしたとき中のメニューも全て閉じる場合は
こちらのスクリプト
を代りに使ってください。
<script type="text/javascript"><!--
if (document.getElementById)
document.write('<style type="text/css">
.tree { display: none; } <'+'/style>');
// 入れ子のとき同レベルのツリーのみ閉じる場合
function simple_tree(elm) {
var tree=elm.parentNode.getElementsByTagName("div")[0];
if (tree.style.display == "block") tree.style.display="none";
else {
var tree_elm,cn=tree.parentNode.parentNode.childNodes;
for (var i=0; i < cn.length; i++) {
tree_elm=(cn[i].firstChild &&
cn[i].getElementsByTagName("div")[0])?
cn[i].getElementsByTagName("div")[0]:null;
if (tree_elm && tree_elm.className == "tree")
tree_elm.style.display="none";
}
tree.style.display="block";
}
}
// --></script>
<script type="text/javascript"><!--
if (document.getElementById)
document.write('<style type="text/css">
.tree { display: none; } <'+'/style>');
// 入れ子のときサブツリーも全て閉じる場合
function simple_tree(elm) {
var tree=elm.parentNode.getElementsByTagName("div")[0];
if (tree.style.display == "block") tree.style.display="none";
else {
var tn=tree.parentNode.parentNode.getElementsByTagName("div");
for (var i=0; i < tn.length; i++)
if (tn[i].className == "tree") tn[i].style.display="none";
tree.style.display="block";
}
}
// --></script>
ツリーメニューのHTMLソースです。
青い部分がクリックにより表示される範囲となります。
この部分のリンクのhref属性、target属性の値にはそれぞれリンク先URL、
フレーム名を指定してください。
また、メニュー２は単に文章が入っているだけですのでツリーメニューと言うより、
いわゆる折り畳みのような感じになります。
<div class="tree_menu">
<a href="javascript:;" onclick="simple_tree(this);"
title="クリック！">
メニュー１</a>
<div class="tree">
├<a href="未設定" title="作成中です"
target="未定">妖しいページ</a><br>
└<a href="未設定" title="教えられません"
target="未定">秘密のページ</a><br>
</div><!-- .tree -->
</div><!-- .tree_menu -->
<div class="tree_menu">
<a href="javascript:;" onclick="simple_tree(this);"
title="クリック！">
メニュー２</a>
<div class="tree">
工事中です・・・
</div><!-- .tree -->
</div><!-- .tree_menu -->
以下はリストで組んだ例です。（スクリプトは要修正）
├や└などはソースがちょっとヘボっぽく見えるような気がしますので外しました。
（list-styleを活用すべきでしょうね）
<ul>
<li><a href="javascript:;" onclick="simple_tree(this);"
title="クリック！">メニュー１</a>
<ul class="tree">
<li><a href="未設定" title="作成中です"
target="未定">妖しいページ</a></li>
<li><a href="未設定" title="教えられません"
target="未定">秘密のページ</a></li>
</ul><!-- .tree -->
</li>
<li><a href="javascript:;" onclick="simple_tree(this);"
title="クリック！">メニュー２</a>
<ul class="tree">
<li><a href="未設定" title="忘れました"
target="未定">アホなページ</a></li>
<li><a href="未設定" title="ぶっ飛びました"
target="未定">ハイなページ</a></li>
<li><a href="未設定" title="公開できません"
target="未定">シャイなページ</a></li>
</ul><!-- .tree -->
</li>
</ul>