jQuery の Treeviewプラグイン を使用して、エクスプローラ風ツリー型メニューを表示します。
初期状態を全てまたは一部開いた状態にしたり、開く動作をアニメーションにしたり出来ます。
jQuery plugin: Treeview のページから、プラグイン、CSS、画像等をZIP形式でダウンロードできます。

対象プラグインを、下記より入手してください。
* jQuery
* jQuery plugin: Treeview

サンプル

サンプルソース

JavaScript + CSS

<script type="text/javascript" src="http://www.strollnet.com/js/jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="http://www.strollnet.com/js/jquery/jquery.treeview.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://www.strollnet.com/js/jquery/css/treeview_ex.css">

<script type="text/javascript">
<!--
   $(document).ready(function() {
      $("#browser").treeview({
         persist: "location",
         collapsed: true,
         animated: "medium"
      });
   });
//-->
</script>

HTML

<ul id="browser" class="filetree">
   <li><span class="folder">Folder 1</span>
      <ul>
         <li><span class="file">Item 1.1</span></li>
      </ul>
   </li>
   <li><span class="folder">Folder 2</span>
      <ul>
         <li><span class="folder">Subfolder 2.1</span>
            <ul id="folder21">
               <li><span class="file">File 2.1.1</span></li>
               <li><span class="file">File 2.1.2</span></li>
            </ul>
         </li>
         <li><span class="file">File 2.2</span></li>
      </ul>
   </li>
   <li class="closed"><span class="folder">Folder 3 (closed at start)</span>
      <ul>
         <li><span class="file">File 3.1</span></li>
      </ul>
   </li>
   <li><span class="file">File 4</span></li>
</ul>