eMenuTree: First menu eMenuTree: First menuInsert some folders and pages and columns into the tree. Don't worry about selecting any options.
Use the "Run / tools" menu to write "emenu.js" and "ehomepage.htm". eMenuTree will ask you to save your project and CSS files, and write emenu.js and ehomepage.htm to your project file folder.
1. emenu.js -- a javascript file that contains your tree menu and the javascript functions.
2. ehomepage.htm -- an HTML file that contains a link to emenu.js.
The first time you write a menu, eMenuTree will also ask about images and whether you want the project to be in a frame. Choose "No" for all these options.
After you run the project, you may use the "preview" menu to preview ehomepage.htm in a browser. The first time you use eMenuTree you must select the browser or browsers you would like to use.
Make changes in the tree using the style sheet, images, and options tab. Re-write the tree menu using "Run / tools" menu. Reload ehomepage.htm into the browser to view the changes.
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.
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.
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.
On the frameset tab, check the "Tree menu is in a frameset" option and choose a file as the content file. On the options tab, un-select the "Use drop-down menus" check box (frame projects use click-to-open tree menus, not drop down menus). Using the "Run / tools" menu, re-write the menu and write the frameset. eMenuTree will write efarmeset.htm. Preview this page in a browser.
For more information, see the help files "Non-frame project" and "Frame project"
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.
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.)
When you write the menu, eMenuTree writes "emenu.js" and "ehomepage.htm". The javascript file "emenu.js" contains your tree menu, and "ehomepage.htm" has a link to it. By default, eMenuTree previews ehomepage.htm. You can choose a different file to preview (home page) using the options tab.
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.
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.
To use drag and drop: click on the node, pause (1/2 second or so), mouse down, begin dragging; or double click on the node, mouse down and begin dragging.
To change your mouse-over effect, use the CSS classes .mainFolderLineMouseOver, .subFolderLineMouseOver, and .linkLineMouseOver.
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.)
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, etc. Please see Help.
Press F1 or use the Help menu to view the full help file.