There are situations when we need for a faster browsing and for a complex structure. The solution is a tree menu. It can use just a few space and can be expanded as need it.



Let's see how to build it. This requires very much attention specially for beginners because of its complexity.

We'll need a class for links that we use inside our menu. You can create it as you desire but there are a few recommendations. The font must be small or maximum 11 or 12 pixels depending by family font. A higher font will break the menu. However, for using a bigger font you'll need to modify used images and to set their dimensions into our code.






Attention:
This may require special algorithmic skills.

Fell free to use this menu on your website. All we ask you is to put a link to our site.

You may experience some problems with this menu because it isn't tested on too many structures because of its complexity. If so, please let us a comment or send an email and we'll solve the problem and send you an more accurate version. All we need is the content of the principal vector to see what's wrong and to help us to fix the problem.

Let's see how to build the menu now.

First of all we'll create a vector that will hold other 3 vectors for links construction. For other structure, all we need to due is to set those vectors.

The first vector will contain the title of links, the second one will be with links and the third one will decide on which level will that link appear from left to right.

Next we have to build 2 functions: generateTree() which we'll call it where we want to put the menu and hideShowNodes() which we'll call it when we click on nodes either for collapsing or reverse.

Let's start with the first one.
Because its based on a table, we'll create the table head for beginning and we'll set the image for root.
We need to for instructions. One to construct rows and other for columns.
With those two we generate the entire menu from those vectors that we've set at beginning.

Outside of the second for we'll put the tr tag because we need this only once per row. When we generate the tr tag we need to verify if that row must be seen or not. I have to remember that the menu will be collapsed at loading time because the idea for it is to use just a few space from our page. You can make it expanded anyway into a sitemap, but I don't recommend this due to it's low indexing because of using javascript language.

Inside the second for instruction where we need to put our node, there are situations when titles for links are large and we need to set a background with dots to continue the dots from node image, otherwise we'll have the titles very far from nodes and it won't be so clear which link at which line we'll be.

After setting nodes, in next cells we'll put our links with titles, and finally in the third condition of this if instruction we need to decide if the current node has other nodes on the same level. If so we need to create a vertical line to create a continuation between them, otherwise we won't put anything.

The second function has an if instruction which decide either if you want to expand the menu or if you want to collapse it.

The first part of if will collapse it this means that we'll hide the rows which we want to hide them. Those will be all lines that are on an upper level than one from where is the the current node. The second part of this instruction will due the opposite.

This is all. Anyway, I've been already told you, that you need to have some algorithmic skills to complete this if you want to create it yourself. We cannot explain here every instruction what it does because we'll be to far from our tutorial and we'll require much much more space for explain this. We can only explain what is happen here, the rest depends on you.

Here is the required code and ... all of these been said, have fun.