Advanced Treeview Tree Menu

This first demo is a basic tree to show how nodes on the tree are built.

Nodes A and B are both attached to the root making them the top level. Nodes C and D have Node B as their parent, Node E has D as the Parent and finally Node F has Node E as it's parent.

This is how the nodes are defined in the data file:-

nodeA|root|Node A Text
nodeB|root|Node B text

nodeC|nodeB|Node C Text
nodeD|nodeB|node D Text

nodeE|nodeD|node E Text
nodeF|nodeE|node F Text

The first element is the Node ID, the second specifies the Parent Node ID (or root) and the third element is the text of that node.

There is no restriction on the number of nodes or the number of levels. Therefore it is possible to build any tree structure required.

(if you do not see the tree above
click here»)

There are no restrictions on the number of nodes or the number of levels. Therefore it is possible to build any tree structure required.

The colors, fonts and various other properties of the tree are set via HTML Param tags. Here is the HTML code for the above tree:-

<applet code="TreeApplet" width="220" height="200" archive="Treemenu.jar">

<!-- Tree Properties -->
<param name="backgroundColor" value="#FFEECC">
<param name="borderWidth" value="1">
<param name="borderColor" value="#CCBB88">
<param name="underlineLinks" value="false">
<param name="scrollBarBgColor" value="#FFAA00">
<param name="statusBar" value="false">

<param name="connectingLines" value="true">
<param name="connectingLinesColor" value="#887744">
<param name="connectingLinesStyle" value="2">

<param name="highTextColor" value="#FFFFFF">
<param name="highBgColor" value="#0000FF">

<param name="nodeOffset" value="25">
<param name="nodegap" value="0">

<!-- Default Node Settings -->
<param name="defaultTarget" value="_top">
<param name="defaultFont" value="Arial,N,10">
<param name="defaultColor" value="#000000">
<param name="defaultExpanded" value="false">

<param name="defaultNormalImage" value="closedfolder">
<param name="defaultExpandedImage" value="openfolder">
<param name="defaultMouseImage" value="point">

<!-- Images -->
<param name="image1" value="closedfolder|./iconimages/closedfolder.gif">
<param name="image2" value="openfolder|./iconimages/openfolder.gif">
<param name="image3" value="document|./iconimages/document.gif">
<param name="image4" value="point|./iconimages/point.gif">

<!-- Node File -->
<param name="Nodedata" value="firstnodes.txt">

</applet>

In the next demo we show how to build a larger tree menu and make the nodes link to other web pages - next demo»