ツリー型折畳みメニュー／Simple Tree Menu

PHPSPOT開発日記の2008年7月9日の記事 JavaScriptを使ったULリストをツリー風に表示するサンプル「Simple Tree Menu」 でのタイトルに偽り無き紹介は Dynamic Drive にて公開されるMenu & Navigationのjavascriptでの実装の一つなる Simple Tree Menu にて、紹介通り頗る有用性に富んだ機能に思い、 当ブログにも関連ファイル

1. simpletreemenu.js
2. simpletree.css
3. 画像ファイル
   1. list.gif
   2. open.gif
   3. closed.gif

をダウンロード、 当ページのチュートリアルの通り、実装させていただきました。 下のリスト表示に於いては、フォルダーアイコンの表示されたリストが下層リストを有し、 クリックすることにより、開閉に依るアイコン、及び下層リストを表示非表示で交互に変化させます。

Simple Tree Menu #1 (persist enabled):

Expand All | Contact All

• Item 1
• Item 2
• Folder 1
  • Sub Item 1.1
  • Sub Item 1.2
• Item 3
• Folder 2
  • Sub Item 2.1
  • Folder 2.1
    • Sub Item 2.1.1
    • Sub Item 2.1.2
• Item 4

Simple Tree Menu #2 (Folder 1.1 open by default):

最初に開いておくブランチを指定出来るタイプ
Expand All | Contact All

• Item 1
• Folder 1
  • Sub Item 1.1
  • Folder 1.1
    • Sub Item 1.1.1
    • Sub Item 1.1.2
    • Folder 1.1.1
      • Sub item 1.1.1.1
      • Sub item 1.1.1.2
      • Sub item 1.1.1.3
      • Sub item 1.1.1.4
• Item 2

上に表示の#1はクッキーで状態を保存するタイプで、 クッキーを切らずに頁を訪れた閲覧者には次回に、 前回頁を去った状態でメニューが表示されます。
下方#2では初期状態のフォルダーの開閉の状態指定が可能になっています。 任意のulタグのrel属性に「open」指定をしたフォルダーは、 初期状態で開いて仮想フォルダー、アイテムを表示します。
どちらのメニューも「Expand All」押下で総てのメニューを開き、 「Contact All」では開いているメニューは総て閉じる構成となっています。
イメージの配置スペースによってはjavascriptファイル simpletreemenu.js を当ブログではパスを書き換えた様に変更の必要がありますので注意が必要です。