Basic Example

This example shows how to set up a basic tree menu with the minimum of configuration.

Demo 1, created from an html list


Demo 2, created from JSON data
[ { "href": "http:\/\/www.easyjstree.com", "hrefTarget": "_blank", "text": "Home" }, { "children": [ { "href": "http:\/\/www.google.com", "hrefTarget": "_blank", "text": "Go to Google.com" }, { "href": "http:\/\/www.yahoo.com", "hrefTarget": "_blank", "text": "Go to Yahoo.com" } ], "isActive": false, "isExpanded": true, "isFolder": true, "text": "Folder 1", "tooltip": "Bookmarks" }, { "children": [ { "text": "Sub Node 1" }, { "text": "Sub Node 2" }, { "text": "Sub Node 3" } ], "isActive": false, "text": "Node 1" }, { "text": "Node 2" } ]
<h5>Demo 1, created from an html list</h5>
<div id="demo1_menu">
    <ul>
        <li><a href="http://www.easyjstree.com" target="_blank">Home</a></li>
        <li class="isFolder isExpanded" title="Bookmarks">
            Folder 1
            <ul>
               <li><a href="http://www.google.com" target="_blank">Go to Google.com</a></li>
               <li><a href="http://www.yahoo.com" target="_blank">Go to Yahoo.com</a></li>
            </ul>
        </li>
        <li>
            Node 1
            <ul>
                <li>Sub Node 1</li>
                <li>Sub Node 2</li>
                <li>Sub Node 3</li>
            </ul>
        </li>
        <li>Node 2</li>
    </ul>
</div>
<script>
    $('#demo1_menu').easytree();
</script>
<br /><br />
<h5>Demo 2, created from JSON data</h5>
<div id="demo2_menu">
    [
       {
          "href":"http:\/\/www.easyjstree.com",
          "hrefTarget":"_blank",
          "text":"Home"
       },
       {
          "children":[
             {
                "href":"http:\/\/www.google.com",
                "hrefTarget":"_blank",
                "text":"Go to Google.com"
             },
             {
                "href":"http:\/\/www.yahoo.com",
                "hrefTarget":"_blank",
                "text":"Go to Yahoo.com"
             }
          ],
          "isActive":false,
          "isExpanded":true,
          "isFolder":true,
          "text":"Folder 1",
          "tooltip":"Bookmarks"
       },
       {
          "children":[
             {
                "text":"Sub Node 1"
             },
             {
                "text":"Sub Node 2"
             },
             {
                "text":"Sub Node 3"
             }
          ],
          "isActive":false,
          "text":"Node 1"
       },
       {
          "text":"Node 2"
       }
    ]
</div>
<script>
    $('#demo2_menu').easytree();
</script>