I. Instructions for your first menu (see “FirstMenu.wmv video as well)
A. Build a simple tree
Insert some folders and pages and columns into the tree. Don’t worry about selecting any options.
B. Write emenu.js and eSample.htm
Use the “Run / tools” menu to write “emenu.js” and “eSample.htm”. eMenuTree will ask you to save your project and CSS files, and write emenu.js and eSample.htm to your project file folder.
2. eSample.htm — an HTML file that contains a link to emenu.js.
The first time you write a menu, eMenuTree will also ask about images. Choose “No” for all these options.
C. Preview eSample.htm
After you run the project, you may use the “preview” menu to preview eSample.htm in a browser. The first time you use eMenuTree you must select the url to preview and browser or browsers you would like to use.
II. Experiment with the tree menu
Make changes in the tree using the style sheet, images, and options tab. Re-write the tree menu using “Run / tools” menu. Reload eSample.htm into the browser to view the changes.
A. Format the tree by making changes in your CSS style sheet.
Go to the style sheet tab, and make changes in your style sheet. The cascading style sheet controls the font and margins used in the tree menu folder lines and link lines. You change the font or margins of a main folder, subfolder, or page link by making changes in the .mainFolderLine, .mainFolderBox, .subFolderLine, .subFolderBox, .linkLine and .linkBox classes. For more details see the Style Sheet help page.
B. Format the tree with various options.
Go to the options tab and experiment with formatting the tree menu options. The left hand margin options only apply to click-to-open tree menus (not drop-down menus).
Add folder images or page link images. Images can be copied from eMenuTree’s web site. For more information see the “Images” help page.
III. Your first project
To make a real web site, put some HTML content files into your project folder (the folder with your project file). Then for each page link in your tree, choose the option “Link to a file in my web” and use the “Edit above file” button to insert the menu into your HTML files. Run the tree menu, reload it into the browser, and see what you get.
Go to the “Options” tab, choose your home page as the file to preview and insert the tree menu into it. Preview this home page in a browser.
IV. Putting the tree menu at the top or right side of the page
To make a project with the tree menu at the top of the page, add columns between main folders, and place the tree menu at the top of your HTML content files. If you want the tree menu on the right side of the page, don’t add columns and put the tree menu in the right hand column of a table in your HTML content files.
You can also put the menu at the bottom of the page (and have it open upward) or the right side (and have it open to the left). Do this by positioning each folder as you like.
V. Quick Help on using eMenuTree
1. Getting started
First build a tree by inserting folders, pages, and columns. Then write the menu using the Run / tools menu. Then preview the project using the preview menu.
2. Formatting the menu
Format your menu by making changes to your CSS style sheet. Go to “Style sheet” tab. Make changes in .mainFolderBox, .mainFolderLine, .subFolderBox, .subFolderLine, .linkLine, .linkBox classes. (You can make changes in your style sheet without any typing: click on the class you want to change, click on the attribute , click on the value.)
4. Normal and drop-down menus
eMenuTree writes two types of menus: normal tree menus and drop-down tree menus. A normal tree menu opens when a user clicks on it. This type of menu is usually used in a frame on the side of the page. Drop-down tree menus are the kind you see on many web pages. They open and close on mouse-over and mouse-out, and float on top of the page.
5. Inserting your menu into other pages
Unless you are using frames, you will want to insert your tree menu into most of the files that your menu links to. You will also want to insert your menu into your home page. Do this using the “Edit” button. Put all pages with tree menus in them in the same folder as your project file.
6. Mouse over
To change your mouse-over effect, use the CSS classes .mainFolderLineMouseOver, .subFolderLineMouseOver, and .linkLineMouseOver.
7. HTML code in a page or folder name
You can use HTML code in any page or folder name, which gives you a wide range of options (include an image, an image-map, change style, etc.)
8. Advanced options
There are many advanced options: change the style sheet class of any node, automatically insert multiple nodes from your hard disk at build time, run time or using server-side scripting, include multiple menus in a page, script the tree from the same page or from another frame, position each drop-down menu exactly where you want it.