tree menu eMenuTree: Build Tree


I. Basics of building a tree menu

A tree menu consists of folders, pages and columns.  Using the tool bar, you can insert, cut, copy and paste.  These same commands are available on the "Build Tree" menu and by clicking the right button of the mouse.  You may also move a node using drag and drop.  To drag and drop a node:

1. Click node, pause (about 1/2 second), mouse down, begin dragging, or

2. Double click node, mouse down, begin dragging.

When you add or paste a node, it will be inserted above the node on the tree that is selected (highlighted).  If you want to insert a node as the final element in a folder, open the folder, select the end of folder node (a small red circle with a white line in it) and then add or paste.

You select a node by single clicking on it.  You open or close a folder by double clicking.  If you want to transfer a node from one project to another, open the first project, copy the node, open the second project, and paste the node where you want it.

II. Page link options

A. Page name

This is the name that will appear as the link in the browser.  You may use single quotes ( ' ), but don't use double quotes ( " ).

This name may contain HTML commands, which gives you a wide variety of options.  For example, you can also use an image instead of a name by entering an image tag.  You may use both a text name and an image if you like.  You can use span or font tags to change the font.

B. Normal Link (page type)

A normal link is a link to another URL.  There are five sub-options:

1. You can link to any URL.  Use this option to enter a URL by hand.

2. You can link to a file in your root folder.  eMenuTree will calculate the relative address for you.  You can insert the menu into this file using the "Edit above file" button.

3. You can insert links to all the files in a folder on your hard disk (see the help file "Inserting multiple links").

4. You may choose not to link to anything.  Usually you will use HTML code in the name.

5. You may choose not to link to anything, and then read a file as the name.

By default, the new page will replace the original page.  If you have checked the "Tree menu is in a frameset" option, the new page will be loaded into the content frame.  (Be sure to use eMenuTree to write the frameset.)  If you would like the new page to be loaded into a new window, check the "Force this page to open in a new window" check box.

If you chose one of the two "no link" options, eMenutree will enter the page name into the tree menu but without wrapping it in an anchor tag.  This allows you to enter any HTML code into the tree, without that code being wrapped in an anchor.  You can enter an image, an image map (and its related tags), a table, blank lines, or anything else.  If you want to use an entire file as the page name, choose the final option and select a file to insert.  If the file contains body tags, only the material between these tags will be inserted.  The code will be in a .linkBox CSS class, but will not be in a .linkLine CSS class. 

There are three restrictions on the HTML code that can be inserted into the tree: the code can not contain script, double parentheses or line breaks.  If you choose to insert a file, eMenuTree will replace all double parentheses with single parenthesis and delete all line breaks before inserting the code into the tree menu.

When inserting HTML code into a tree menu, you will usually want to check the "Hide the page link image" check box.

C. Javascript link (page type).

A java script link is a link that executes some javascript.  If you use this option, be sure to check your javascript carefully.  The sample javascript combo box provides you with some javascript examples which you may use or modify.

III. Folder options

A. Folder name

This is the name that will appear as the link in the browser.  You may use single quotes ( ' ), but don't use double quotes ( " ).

This name may contain HTML commands, which gives you a wide variety of options.  For example, you can also use an image instead of a name by entering an <img ...> command. You may use both a text name and an image if you like.  You can use the <span></span> or <font></font> command to change the font. 

B. Normal Folder

All folders open or close when a user clicks on it.  A normal folder does nothing else.

C. Normal folder plus some javascript options.

With this option, you can execute some javascript before the folder opens.  In a frame set this can be used to load a different file into the content frame (using the script: if(parent.emtcf){parent.emtcf.document.location='yourURL'}).  If you use this option, be sure to check the results.

IV. Columns

A new column will insert a column in your tree menu.  You choose the width of this column in pixels or percent.  Columns are usually used in a projects where the tree menu is placed at the top of the page.

V. End of Folder

The end of folder node will *not* appear in your tree menu pages.  It appears in the "Build Tree" view in order to allow you to insert a node at the very end of a folder.

VI. Inserting multiple nodes

There are two ways to automatically insert multiple files into your project.  The Build tree menu has a "Insert multiple nodes" command, and every page has an "Insert folder into tree menus " option.  These two ways to insert multiple files have an importance difference. 

The "Insert multiple nodes" of the Build tree menu actually inserts all the nodes into your project.  They will appear in the tree which you see in the Build tree screen in eMenuTree.  You can then modify these nodes as you please.

The "Insert folder into tree menus " page link options is a place-holder for these files.  The nodes are not inserted into the build-tree screen, they are directly inserted into you web page tree menus when you run the program.  The advantages of this are (a) projects will load and save more quickly, and (b) when you modify the files on you hard disk, all you need to do is re-run the program.  The updated project will have the modified files in it.

You will notice that when you select a folder to insert, the program inserts the subfolders and files in that folder into your tree.  If you want to insert the folder as well, do this by first using the insert folder command, give this new folder the name you want, and then insert subfolders and files into this folder.

VII. Selecting files when inserting multiple nodes

In either method of inserting multiple files, you select the folder, the files to include and exclude, whether to include files in sub-folders, whether to include the sub-folder structure, and whether to open pages in a new window, the same window,or the right frame.  Note:

1. The folder must be in your web root folder.

2. In the files to include and exclude boxes, include one entry per line.  The entries are *not* case sensitive.

3. The files to include option is meant to be the extensions to include, but the real rule is simply that the file name must end in one of the strings listed in the text box.

There are six options that affect the link line name.  You can include the file size, the date last modified, the time last modified, and the file extension.  The last two options let you select the name more precisely.  They are defined as follows:

1. Replace underscore with space -- the underscore is replaced with a space, a double underscore is replaced with a single underscore

2. Sentence capitalization -- converts a name such as "seeAboveExample" to "See above example".  The actual rules this option applies are:

a. Do nothing if the file name contains an underscore.

b. Capitalize the first letter of the file name.

c. If an uppercase letter is preceded by a lowercase letter, change it to lowercase and insert a space before it.

Checking both of these last two options gives the following results:
File name Link name Comment
seeAbove See above Applies sentence capitalization
See_Above See Above Replace underscore with a space; Sentence capitalization is not applied because of the underscore.
buyIBM Buy iBM Applies sentence capitalization.
Buy_IBM Buy IBM Sentence capitalization not applied because of underscore.
John__Doe John_Doe Replace double underscore with single underscore.