前の記事 ≪:FirefoxにGUIプロトタイピングの機能を追加するものすごい拡張「The Pencil...
次の記事 ≫:インターネット越しにWiiリモコンを操作できる「Wiimote-over-HTTP」

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

2008年07月09日-はてなブックマーク

スポンサード リンク
[PR] 英単語を忘却曲線アプリを使って超効率よく記憶する方法
Dynamic Drive DHTML Scripts- Simple Tree Menu
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>

次のようになる。



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

関連エントリ

関連の記事検索:ツリー, CSS, Webデザイン
スポンサード リンク

By.KJ : 2008年07月09日 10:05 livedoor Readerで購読 Twitterに投稿

間違いの指摘をしていただける方はメール、あるいはTwitter/FBでお願いします(クリック)