This is a unobtrusive Tree Menu script that turns any ordinary list (UL element) into a collapsible tree!

JavaScriptを使ったULリストをツリー風に表示するサンプル「Simple Tree Menu」。

次のようなHTMLがあったとすると、

<ul id="treemenu2" class="treeview">
<li>Item 1</li>

<li>Folder 1
  <ul>
  <li>Sub Item 1.1</li>
  <li>Folder 1.1
    <ul rel="open">
    <li>Sub Item 1.1.1</li>
    <li>Sub Item 1.1.2</li>
    <li>Folder 1.1.1
      <ul>
      <li>Sub item 1.1.1.1</li>
      <li>Sub item 1.1.1.2</li>
      <li>Sub item 1.1.1.3</li>
      <li>Sub item 1.1.1.4</li>
      </ul>
    </li>
    </ul>
  </li>
  </ul>
</li>
<li>Item 2</li>
</ul>

次のようになる。



もちろん、折りたたみ可能。画像を変えるだけで独自フォルダにもなります。
これは非常に使えそうですね。

関連エントリ

• ファイルツリー構造を表示するためのJS「jQuery File Tree」
• 手軽に使えるExcel風グリッドＵＩ「Flexigrid for jQuery」
• JavaScriptでツリー構造やグラフ、ヒストグラムを描画できるライブラリ「Ortho」