You see a simple example of tree menu. To build it we had to just describe tree structure and define a few main attributes.

Structure of a tree is a complex associative javascript array with two elements in the first level:

format - We define set of parameters here which describe how the tree will be look like.

sub - (abbreviation from 'SubNodes') We describe hierarchical structure of the tree here.
Example:

var TREE_NODES={
format:{
//formatting parameters
},
sub:[
//tree structure
]
};

Definition of tree structure

One node of a tree defines as associative javascript array. Main attributes are:

html - node caption. This code will be enclosed in <A> </A> when tree will build code of node.
url - node url. It's value of HREF attribute of builded link.
target - target frame. It's value of TARGET attribute of builded link.
sub - array with node children.

Examples:

var TREE_NODES={
format:{
//formatting parameters
},
sub:[
//three nodes without children
{html:'Node 1', url:'http://somewhere.com/'},
{html:'Node 2', url:'http://somewhere.com/'},
{html:'Node 3', url:'http://somewhere.com/'}
]
};

var TREE_NODES={
format:{
//formatting parameters
},
sub:[
//one node with children and twho without ones
{html:'Node 1', url:'http://somewhere.com/',
  sub:[
   {html:'Sub Node 1', url:'#'},
   {html:'Sub Node 2', url:'#'}
  ]
},
{html:'Node 2', url:'http://somewhere.com/'},
{html:'Node 3', url:'http://somewhere.com/'}
]
};

Tree formatting

Menu position on the page is absolute. Therefore we have to define the left top corner of the menu in the format section.
Example:
var TREE_NODES={
format:{
left: 100,
top: 100,
...

These parameters are required.

Also we have to define initial width and height of menu rectangle.
Example:
var TREE_NODES={
format:{
...
height: 100,
width: 100,
...

These parameters are also required.

If you want to have static background (background don't resize when node expanded or collapsed) add attribute dont_resize_back and set it to true.
Example:
var TREE_NODES={
format:{
...
dont_resize_back: true,
...

If you want to turn animation effect on use animation attribute.
Example:
var TREE_NODES={
format:{
...
animation: true,
...

If you want to see full set of available parameters please visit documentation page.

Operations


Background:
Static	Resizable
Animation:
ON	OFF
One branch at the time:
ON	OFF