超簡単ツリーメニュー

今回は非常に簡単に構成できるツリーメニューです。(ただ、スクリプトの部分は 複雑になっていますが)ツリーメニュー 及び、自閉式ツリーメニューではツリーを入れた ボックス(div要素)にidを設定し、そのidをトグルとなる要素で指定して開閉 (折り畳み)を操作する必要がありました。 しかし、今回のツリーメニューはidの設定も不要にしてHTML部分を簡素にしたため、 複数設置したり入れ子にするときも混乱してidを書き間違えたりする心配も無くなり ツリーメニューが組み易くなると思います。

サンプルです。開閉動作に合わせてツールチップもOPEN/CLOSEと変化します。 (各ページのリンク先はありません)

クリック1
クリック2
クリック3

ここにチェック入れると自閉式ツリーメニュー同様の動作モードのサンプルになります。

ツリーメニューを動作させるための JavaScript です。 <head>〜</head>の中に置いてください。

<script type="text/javascript"><!--
// EasyTree (C)2007 Amenti. http://amenti.usamimi.info/
// 2007/02/21 update.
// 2007/02/06 update. (fix for KHTML)
// 2007/01/11 release.
// Terms of use: Keep to copyright. No claim. No support.

var easytree_auto_hide=false; // 他のツリーを開くと自動で閉じる (true or false)
var easytree_class="toggle";
var easytree_tree_class="tree";
var easytree_open_tooltip="OPEN";
var easytree_close_tooltip="CLOSE";

var easytree_css='<style type="text/css"> .' + easytree_tree_class + ' { display: none; }<'+'/style>';
if (document.getElementById) document.write(easytree_css);

if (window.addEventListener) window.addEventListener("load",easytree_init,false);
else if (window.attachEvent) window.attachEvent("onload",easytree_init);

function easytree_init() {
  if (!document.getElementById) return;
 var ns,count=0;
 var tn=document.getElementsByTagName("a");
 for (var i=0; i < tn.length; i++) if (tn[i].className == easytree_class) {
  ns=tn[i];
  while(ns.nextSibling) {
   if (ns.className == easytree_tree_class) break;
   else ns=ns.nextSibling;
  }
  ns.setAttribute("id","easytree"+count+"t");
  tn[i].setAttribute("id","easytree"+count);
  tn[i].href="javascript:easytree("+"'easytree"+count+"');";
  tn[i].title=easytree_open_tooltip;
  count++;
 }
}

function easytree(id) {
 var elm=document.getElementById(id);
 var div=document.getElementById(id+"t");
 if (div.style.display=="block") {
  div.style.display="none";
  elm.title=easytree_open_tooltip;
 }
 else {
  if (easytree_auto_hide) {
   var sib=elm.parentNode.childNodes;
   for (var i=0; i < sib.length; i++) {
    if (sib[i].className == easytree_class) sib[i].title=easytree_open_tooltip;
    else if (sib[i].className == easytree_tree_class) sib[i].style.display="none";
   }
  }
  div.style.display="block";
  elm.title=easytree_close_tooltip;
 }
}
// --></script>
※ 変数 easytree_auto_hide の値を true に変更すると 自閉式ツリーメニューと同様の動作モードになります。
※ JavaScriptが無効な環境や対応していないブラウザではツリーを展開した状態で 表示するようにしてあります。

JavaScriptの部分は長くなりますので解説は割愛します。

サンプルのスタイルシートです。リンク下線の有無や文字色など適当に変更して <head>〜</head>の中に置いてください。

<style type="text/css"><!--
.tree { line-height:normal; }
.tree a { color:#000; text-decoration:none; }
.tree a:hover { color:#33f; text-decoration:underline; }
a.toggle { color:#000; text-decoration:none; line-height:normal; }
a.toggle:link, a.toggle:visited, a.toggle:hover { color:#077; text-decoration:none; }
--></style>
※ このスタイルシートはリンク下線の有無や文字色、行間を調節しているだけで、 省いてもツリーメニューの動作に支障はありません。

ツリーメニューのHTMLソースです。a要素、div要素のタグのクラス名(class属性値) で判別しますので、次のようにHTMLのマークアップは非常にシンプルになっています。 このツリーメニューではクリック3のツリーのみ入れ子にしてあります。

<a class="toggle">クリック1</a><br>
<div class="tree">
├<a href="未設定" title="作成中です" target="未定">妖しいページ</a><br>
└<a href="未設定" title="教えられません" target="未定">秘密のページ</a><br>
</div>

<a class="toggle">クリック2</a><br>
<div class="tree">
├<a href="未設定" title="忘れました" target="未定">アホなページ</a><br>
├<a href="未設定" title="ぶっ飛びました" target="未定">ハイなページ</a><br>
└<a href="未設定" title="公開できません" target="未定">シャイなページ</a><br>
</div>

<a class="toggle">クリック3</a><br>
<div class="tree">
├<a class="toggle">クリック3−1</a><br>
<div class="tree">
│├<a href="未設定" title="封印されました" target="未定">邪悪なページ</a><br>
│└<a href="未設定" title="実在しません" target="未定">幻のページ</a><br>
</div>
└<a class="toggle">クリック3−2</a><br>
<div class="tree">
 ├<a href="未設定" title="500年後に完成予定です" target="未定">未来のページ</a><br>
 └<a href="未設定" title="夢で終りました" target="未定">夢のページ</a><br>
</div>
</div>