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
最新のブログ記事(新着順)
- AIを使ってサイトマップが作れる「Octopus.do」
- ライブラリ依存のないモーダルオープンライブラリ「Blendy」
- 個性的な明朝フリーフォント「築豊初号明朝OFL」
- CSSで太陽が差し込むようなアニメーション実装
- 可愛くアニメーションする「beautifully crafted animated icons」
- アイソメトリックなアイコンがアイコンがPNG,SVGでゲットできる「Isoicons」
- ユニークなカタカナフォントtorisippo
- 美しいメッシュグラデーションをCSSで簡単に取得できる「MSHR」
- TailwindCSSなサイトで使える100以上のアニメーションエフェクト「animata」
- SVG形式のテック系企業のロゴを簡単にゲットできる「Svgl」
- 過去のエントリ