JavaScriptを使ったULリストをツリー風に表示するサンプル「Simple Tree Menu」
2008年07月09日-
スポンサード リンク
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>
次のようになる。
もちろん、折りたたみ可能。画像を変えるだけで独自フォルダにもなります。
これは非常に使えそうですね。
関連エントリ
スポンサード リンク
Advertisements
SITE PROFILE
最新のブログ記事(新着順)
- 約7500種の汎用ピクトグラムアイコン集「Phosphor Icons」
- ほぼCSSで実装されたUIフレームワーク「Ellegant CSS」
- TailwindCSSベースの150種類以上のUIライブラリ「SailboatUI」
- 1700種類以上のSVGアイコン「MingCute Icon」
- 2000種類以上の汎用ピクトグラムアイコン集「Atlas Icons」
- かわいい手書き風フォント「うさぎとまんげつのサンセリフ」
- ランディングページのサンプル集「Landings」
- WEBのUIコンポーネントギャラリー「The Component Gallery」
- 汎用で使える700+のピクトグラムアイコン「Sargam Icons」
- 白黒写真をWEB上で簡単にカラーにできる「Palette」
- 過去のエントリ