jQueryのTreeViewプラグインを利用したツリー型のメニュー

説明補足説明コード分割コード関連書籍コメント投稿

このサンプルは、jQueryのTreeView()プラグインを利用してツリー型メニューを表示します。[+]をクリックするとノードが展開します。[-]をクリックするとノードを折りたたみます。ノードをクリックするとページを移動します。「Site Map」を展開して「JavaScript + Ajax」のノードをクリックすると当サイトが表示されます。

このサンプルは、jQueryのTreeView()プラグインを利用してツリー型メニューを表示します。[+]をクリックするとノードが展開します。[-]をクリックするとノードを折りたたみます。ノードをクリックするとページを移動します。「Site Map」を展開して「JavaScript + Ajax」のノードをクリックすると当サイトが表示されます。 



    $(function() {   
      $("#tree").treeview({   
        collapsed: true,   
        animated: "medium",   
        control: "#sidetreecontrol",   
        persist: "location"  
      });   
    })  

<ul id="tree">
  <li><a href="?#"><strong>Home</strong></a>
    <ul>
      <li><a href="#">Home 1 </a></li>
      <li><a href="#">Home 2</a></li>
      <li><a href="#">Home 3</a></li>
    </ul>
  </li>
 ・・・
  <li><a href="?#">Site Map</a>
    <ul>
      <li><a href="http://jsajax.com" target="_blank">JavaScript + Ajax </a></li>
      <li><a href="http://www.google.co.jp" target="_blank">Google</a></li>
      <li><a href="http://www.yahoo.co.jp" target="_blank">Yahoo!</a></li>
      <li><a href="http://www.msn.co.jp" target="_blank">MSN</a></li>
    </ul>
  </li>
</ul>