| # Advanced Treeview Tree Menu
[ Tree Home] [ Buy Now ] [ Documentation ] [ Examples & Demos ] [ Help & Support ]
## Advanced Treeview Tree Menu Demos and Examples - First Tree
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»
« back to Demo Index « back to Getting Started
[ Tree Home] [ Buy Now ] [ Documentation ] [ Examples & Demos ] [ Help & Support ]
Getting Started Documentation Examples First Tree Menu Adding more Nodes Background Image Tree Menu and Frames Overriding Default Node Properties Interacting with JavaScript Dynamic Methods Dynamic Node Generation Greek Demo