tree menu eMenuTree: How to ...


I. Build and format a tree menu: how to ...

A. Format your tree menu

In your CSS style sheet, define .mainFolderBox, .mainFolderLine, .subFolderBox, .subFolderLine, .linkBox, .linkLine.  See "Style Sheet" help file for more information.

B. Use an image as a page or folder link name

Use an image tag as the page or folder name. You may include both text and an image.  Note that the name of a link or folder may contain HTML commands.

C. Use an image map as a page link

Choose "Normal Link" and "No link" sub-option.  Put the required HTML commands (the img tag, the map tag, the area tag) into the page name (or into the file you select under the second "No link" option).  You should also check the "Hide the page link image" check box.

D. Add vertical space to a tree menu

Insert a page link.  Choose "Normal Link" and "No link" sub-option.  Use two or more <br> tags as the page name.  You should also check the "Hide the page link image" checkbox.

E. Add horizontal space to a tree menu

Put a blank column in your tree. This can be done by making the first element of your tree a column, or by inserting two columns in a row later in the tree.

F. Increase or decrease the indent for subfolders

Use Options>"Indent of subfolders in pixels".  This indent settings is used in click-to-open tree menus.  Drop-down tree menus use the settings in your CSS file.  Normally all folder and link box margins in the CSS file should be set to 0.

G. Choose a background color for your entire page

Use the background-color attribute of the body selector in your CSS style sheet.

H. Copy a folder from one project to another project

Copy the folder.  Close the first project.  Open the second project.  Paste the folder

I. Use mouse over / out in a tree menu.

Select the option "Use mouse over / mouse out in a tree menu" option, and add .mainFolderLineMouseOver, .subFolderLineMouseOver, and .linkLineMouseOver selectors to your cascade style sheet.

J. Center the tree menu table on the page.

Check both the "Center tree menu table on page" and "Set the tree menu table width" options.  You can also set the width of each column in your tree menu.