Web Designer Blog

The tree menu has guide line to show the node’s hierarchy by default. If you dislike these guide lines showing in the tree menu, you can uncheck the option to delete them. Please click Global Seetings > Line on the tasks panel, and property panel in the bottom pops up, you will see the option “Show lines” checked. The tree menu is deleted the guide lines in the preview window immediately by unchecking this option.

Button in the tree menu indicates that the node has sub nodes, the visitors can expand the node to view sub nodes in details, or collapse the buttons to hide the sub nodes. In order to match with your website, the buttons can be customized to suit for your style. Please go to Global Settings > Button, choose the buttons image from the built-in image library or the prepared images to insert the image to tree menu; and also you can type the path to insert the tree menu. Surely, you can set the width and the height of button image to perfect your tree menu.

Node event not only can be a link, but also can be JavaScript. Following are two samples.

A. Open a customer defined window

1. Create a node;
2. In Node Settings > General, choose “_self” in the Target box;3. In link box, input code as follows:
javascript:window.open(“http://www.sothink.com”,”_blank”,
“width=800,height=600,status=yes,toolbar=no,”)

B. Open a user-defined function window.

Note: It supports only Internet Explorer.

1. Add user-defined function into in web page like this:
2. In Node Settings > General, choose “_self” in the Target box;3. In Link box, input code as follows:
javascript:myaddFavorite()

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.

When you surf the website, there are so many linked pages that needs to view, maybe tired or no enough time, you must close the tree menu page when finishing the partial nodes, and continue to fulfill the rest next time.

Still remember the last node that you clicked in previous time? Most of us maybe forget it, but the tree menu can impress that node and prompt the viewers. Now please re-open the tree menu page, there is node with white background in the tree menu. That is the last node you viewed in the previous time, you can continue the rest from here.

Check this tree menu samples to get it:

How to let the tree menu remember the state and recall for next time?

It is simple to get this function. Please check the option “Record the tree menu status and recall for next time” in Global Settings > Advanced. Just one click, your viewer can browse the pages with ease.

Download tree menu to create such a navigation menu.

Sothink Menu Template collects lots of website-matching DHTML menus and tree menus, you can apply the professional and well-designed menus to your website directly. In menu template, almost all menus are listed here, such as vertical or horizontal JavaScript menus, drop down menus and tree menus. Each series of menu template inlcudes the DHTML menus of several colors. Come on, pick up your favorite menu template!

Just 3 steps to build menu from menu template. First, choose one menu template and open the authoring file (.pgt or .stm) in Sothink program; and then edit the menu style, text and link to match with your website; finally, publish the menu to make it display perfectly on Internet.

View Menu template:

Each Menu template has several colors:

View drop down menu template >>

View tree menu template >>

Download Sothink DHTML Menu >>

Download Tree Menu >>