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>"left 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 tree menu

Use Options>"menutree background color".

H. Choose a background color for your entire page

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

I. Copy a folder from one project to another project

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

J. 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. Drag and drop.

Click on node, pause, mouse down, begin dragging; or double-click, mouse down, begin dragging.

K. 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.

L. Change the folder where eMenuTree writes emenu.js.

eMenuTree wites all files to the folder where you save your project file.  So store your project file to the folder where you want to write emenu.js to.  Note: after you move emenu.js you should re-write the tree menu.

M. Advanced: Insert javascript into a tree menu.

Insert a page link in your tree, choose the "No link" option, and set the page name to "javascript:[Put your script here]".  This script will execute when the page loads.

II. Cascade style sheet: how to ...

A. Edit your cascade style sheet.

Click in the selector that you wish to modify (perhaps ".mainfolderline").  Click on the attribute you wish to modify (perhaps "color").  Click on the color you want.  eMenuTree will edit your cascade style sheet for you.

B. Change the class used for a single node of a tree.

Add the three letters *02 to the page name, and add the classes .linkLine02 and .linkBox02 and .linkLine02MouseOver to your CSS style sheet.  For a main folder, add .mainFolderLine02, .mainFolderBox02, .mainFolderLine02MouseOver.  For subfolders add .subFolderLine02, .subFolderBox02, .subFolderLine02MouseOver..  Change an entire tree by adding *02 to every node and all of these classes to your CSS file.  For more information see the help file "Style Sheets".