Tree Menu v2.0

NOTE!  View the source HTML of 'template.html' for complete customization details.

Welcome to OpenCube's Tree Menu!

This tree uniquely combines pure CSS, a tiny 5K bit of JavaScript, and HTML lists to create the ultimate professional grade tree menu effect.

The tree's simple, yet flexible design, allows it to easily integrate with even the most complex dynamically generated sites.  Extremely low code overhead delivers the fastest load time and reaction speeds possible in a tree.  These capabilities are matched on every common browser for both PC and Mac (IE, Netscape, FireFox, Mozilla, Safari, Opera).

This download includes the fully customizable tree which may be customized and used on your site for a thorough evaluation.

Included Sample (Template) Menu

Two identical samples are included with the download which may be used as a template for customizing your sites tree.

1:  Self Contained Sample - template.html  - This sample is located in the root.  All supporting code, HTML syntax, and parameter settings are located within the HTML source itself.  Integrating this tree with dynamically generated server side pages, such as ASP or PHP is a snap.  Updating multiple page trees may be simplified by including the menu structure and parameter settings inside an include.  View the sample menu's source HTML for complete customization instructions.

2: Seperate_Files_Sample - template.html - Identical to the above sample (located in the seperate_files_sample folder), except that the menu source code and customizable settings are separated and located within their own files.  This makes updates a breeze when including the tree on multiple pages.

Tree Menu Features & Advantages


Q: I added the HTML for a new menu item in the structure but it did not appear?
This is usually a syntax error.  Double check that you have a closing </LI> tag and that all HTML contained within the item is formatted correctly.

Q: The tree menu animations are very fast in the template, however they slow down when I embed the same menu in my page, why?
IE and FireFox both animate slower relative to how deep your effect is embedded within your documents structure (by deep, meaning levels... i.e. <div><table><div>...the menu</div></table></div>, etc.)  You can overcome this problem in IE by embedding the menu within an absolute positioned DIV (<DIV style="position:absolute">menu html here</DIV>)   If your menu is stretching a bordered container this option may not work with your layout.  To avoid slow-downs, try to keep your layout simple, instead of using tables to position the menu, try putting it an absolute positioned div and give it coordinates.

Q: How do I position the tree in my document?
The tree positions itself as an inline block level element at the point of insertion within your HTML source code  (similar to positioning a table or div within your page).  To move the tree, move the entire menu structure (including comment tags witch identify the tree menu structure and links section) to an insertion point of your choosing within your HTML source code.  If using the separate files sample, move the <SCRIPT> tag which references the 'tmenu_data.js'  file instead.

Q: Clicking on the text portion of an item does not expand the tree, why?
By default, clicking on the text portion of an item with child nodes will not expand the item.  To make the text portion clickable surround the items description in a span tag (e.g. <span>item description</span>).

Q: How do I set a node to be expanded by default?
To set an item to be expanded by default when the tree menu loads, add the custom expanded attribute to the items LI tag and set the value to 1 (e.g. <LI expanded=1>...</LI>).

Q: How do I make the menu 508 compliant?
The menu structure and content are contained within a UL tag  which by default is set to 'display:none;'.  To make the menu compliant, remove the 'display:none' statement.  *Note: You may notice a flicker when the page loads with this statement removed from the UL's inline style.

Q: Can I add a custom bullet or icon to each of my menus items?
Yes, simply add an <IMG> tag within the items LI tag.  You can add any custom HTML you wish to each menu item.

Q: How do I make text descriptions wrap to a second line?
Use a break tag within your description <BR> (e.g. This is my first line<BR>This is a second line.).

Q: How do I add more than one Tree Menu to a single page?
There are two ids which identify different parts of the tree...

To add a second tree add a new tree structure and a new function with parameter settings.  Next, increment the numeric id of both ids outlined above...  they would become... 'tmenu1' and 'tmenudata1'.  An infinite number of Tree Menus may be added to any page using this technique.

Web Effects (c) Copyright, 2005 OpenCube Inc. All Rights Reserved.