Web Designer Blog

Tree Menu can be controlled fully on webpage by interaction with mouse event. Click the text or image on page, you will see the tree menu expanding or collapsing its sub-menu. View the tree menu sample below to experience it:

How to create JavaScript tree menu like this?

Steps to control the expanding or collapsing of the menu-tree in above sample:

1. Create an HTML page, and insert the tree menu into it.

2. Select the “Root” in the Tree panel, and then get the codes for expanding or collapsing the sub-tree from Global Settings > Advanced.

3.Insert the images and that refers expanding or collapsing the sub-tree. Then copy the codes which expand or collapse sub-tree and paste them to the web page as follows.

Four pieces of codes are inserted in this sample:

For expanding image:

<img src=”0609_f.gif” onClick=”stExpandSubTree(‘tree6575’,0,1);return false;“>

For expanding text:

<a href=”#” onClick=”stExpandSubTree(‘tree6575’,0,1);return false;“>expand all</a>

For collapsing image:

<img src=”0609_uf.gif” onClick=”stCollapseSubTree(‘tree6575’,0,1);return false;“>

For collapsing text:

<a href=”#” onClick=”stCollapseSubTree(‘tree6575’,0,1);return false;“>collapse all</a>

Note: Please input the above red codes manually, and make sure the function works well. The codes “return false” must be added into the <a></a> tag when the function “onclick” is called; if not, it causes the page refreshing in IE and Opera 9+ on Mac. And the codes can be copied from Tree Menu program except for the above-mentioned two parts.

Ok, click the image or text to experience.