このページの本文へ

ナビゲーションメニューに便利な「Treeview」の使い方

jQueryでエクスプローラ風メニューに!

2009年04月01日 06時00分更新

藤本 壱

  • この記事をはてなブックマークに追加
本文印刷
「Treeview」なら、リストをツリー風の見た目できれいに表示できる

 ネットショップや情報サイトなど、複雑な階層構造のWebサイトでは、なるべく分かりやすくて見栄えのいいナビゲーションを設置したい、というニーズがあります。今回は、jQueryプラグインのひとつ、「Treeview」を使って、リストをツリー風に格好よく表示する方法を紹介しましょう。


ui/li要素をツリー表示する「Treeview」

 Treeviewプラグインは、HTMLのul/li要素でマークアップしたリストをツリー風に表示するJavaScriptです。要素をクリックで開閉したり、Windowsのエクスプローラのようなフォルダ/ファイルアイコンを表示したりと、いろいろカスタマイズできるのが特徴です。開発者はJorn Zaefferer氏(Jornの「o」の上に点が2つ付きます)で、MITライセンスで公開されています。

Windowsのエクスプローラのような表示
Treeviewプラグインの設置例。Windowsのエクスプローラのような表示

 Treeviewプラグインは、以下のページで配布されています。ページの先頭の方にある「Download」のリンクをクリックするとダウンロードできます。

http://bassistance.de/jquery-plugins/jquery-plugin-treeview/

 ダウンロードしたZIPファイルを展開すると、いくつかのファイルとフォルダができます。そのうち、「jquery.treeview.min.js」と「jquery.treeview.css」の2つのファイルと、「images」のフォルダを、Treeviewを設置したいサーバーにアップロードします。

 なお、TreeviewプラグインはjQueryとともに動作しますので、jQuery本体も別途入手してアップロードしておきましょう。

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

HTMLリファレンス誘導バナー

CSSリファレンスサイト誘導バナー

Webディレクター江口明日香が行く

ランキング