Location: PHPKode > scripts > NavTree > navtree/navtree2.html
<TITLE>Navigation Tree Sample

<script language="JavaScript" src="navtree2.js">

============ DEFOME STYLE  =====================================================
Define style for use with the tree for the content box.
    .root { background: red; font-weight: bold; font-size: 16pt}
    .link-A { background: cyan;}
    .link2 { background: lightblue; vertical-align:top}


============ LAYOUT HTML FIRST==================================================
Do the HTML Layout First, with the tree location put within a DIVISION
<H1>Navigation Tree Demo</H1>
<H2>Standard Tree</H2>
<TABLE Border=1 Width=50%><TR><TD VALIGN=TOP WIDTH=50% HEIGHT=80>
<DIV ID="NAVTREE" style='width: 50%; position: absolute; background:white'>Tree go here</DIV>
Content go here

============ GENARTE TREE CONTENT ==============================================
Generate the tree content AFTER division declaration
    function NodeLink(link, desc, img)
    {   out='<IMG style="background:green" src="'+img+'"></IMG>';
        out+='<A HREF="'+link+'">'+desc+'</A>';
        return out;
    //===== INITIALIZE Navigation Tree with the Root node with class id "root"
    NAVTREE("NAVTREE", "Demo<BR>TEST", "root", 1);
    //===== Add the node and meanwhile capture the id
    node1=AddNode(NodeLink("http://www.php.net", "PHP", "IMAGE/link.gif"), "link2", 0, 1);
    node2=AddNode("NODE2", "link-A", 0, 0);
    node3=AddNode("NODE3", "link-A", 0, 0);
    node4=AddNode("NODE4", "link-A", 0, 0);

    node1a=AddNode("NODE1a<BR>TEST<BR>TEST 2", "link2", node1, 0);
    node1b=AddNode("NODE1b", "link2", node1, 0);
    node1c=AddNode("NODE1c", "link2", node1, 0);
    node1d=AddNode("NODE1d", "link2", node1, 0);

    node1a1=AddNode("NODE1a1", "link2", node1a, 0);
    node1a2=AddNode("NODE1a2", "link2", node1a, 0);
    node1a3=AddNode("NODE1a3", "link2", node1a, 0);
    node1a4=AddNode("NODE1a4", "link2", node1a, 0);
    //===== Retrieve the cookie
    //===== Display it
    divTag = document.getElementById(divID);
    divTag.innerHTML = PrintTree(0,0);

Return current item: NavTree