eMenuTree: Cascade style sheet

Editing your Cascade style sheet

eMenuTree includes a default cascade style sheet, which will load with every new project.  The names of the selectors should be self evident (i.e ".mainFolderLine" is the class of the main folder line, etc.).

Using the cascade style sheet, you can change the margins and fonts of your folders and page links.  You do this by changing font and margin properties (such as font-size, margin-bottom, etc) of the appropriate class (.mainFolderLine, .subFolderBox, etc.)

It is easy to edit the style sheet in eMenuTree.  You don't have to type the changes yourself.  Click on the inside of the class you want to modify, click on the attribute you want, and click on the value you want.

To see what the result will look like in Internet Explorer, click the "preview" button.  To see the result in other browsers, run the project and then preview it in the browser of your choice.  (You can use preview menu to do this.)

Normally you will want to check the "Save CSS" check box.  This will cause the CSS to be saved before the preview.  (If you are editing the style sheet in an external editor, don't check this box -- because it saves the style sheet that is in eMenuTree's style sheet editor text box.)

When you change the style sheet, you don't need to re-run the project to see the changes.  Just reload the page in your browser.

You must include a link to the cascade style sheet in your HTML files.  It is easy to do this with eMenuTree's editor (open the file in the editor, put the cursor on a blank line in the head section of the file, press the button "Insert CSS file link").

Use the style sheet menu to choose a new style sheet, change the name of your style sheet, etc.  Using this menu, you may also select an external cascade style sheet editor if you like.

eMenutree style sheet classes

The class names used by eMenutree are "menuTreeBox", "mainFolderBox", "mainFolderLine", "subFolderBox", "subFolderLine", "linkBox", "linkLine".  As the names suggest, every folder, subfolder and link line is in a line element (an anchor) and in a box element (usually a division).  The exact code that eMenuTree writes is as follows:

If the user is using an old browser, eMenuTree writes paragraphs instead of divisions:

By default, a top level link is in a .mainFolderBox division and and a .linkLine anchor.  The options tab contains an option to change this to a .mainFolderBox division and .mainFolderLine anchor.

Drop down tree menus : Margins, Borders, Padding

If you are using drop down tree menus , the size of your margins, borders, and padding will affect the position of sub-menus.  Also, the exact position will differ somewhat in different browsers.  We suggest you follow the following rules:

1. Only use Margins, Borders, and Padding in box classes (mainFolderBox, ect.).  Don't use them in line classes (mainFolderLine, etc.).

2. Only use Margins in the mainFolderBox class.  Don't use them in subFolderBox or lineBox.

3. Use the exact same borders and padding in all three box classes: mainFolderBox, subFolderBox and lineBox.

Advanced: changing the CSS classes for an individual node of a tree

To change the CSS class of any folder or page link add three characters "*XX" to the end of the folder or page name, i.e., the little star above the 8 on your keyboard followed by any number from 01 to 99.  For example, you can name a folder "Examples*06".  (eMenuTree will know the *06 is not part of the name.)

Doing this will cause eMenuTree to add the two digits you have selected to the line and box class names.  For example, if you add "*06" to a subfolder name, the box, line, and mouseOver class names of the subfolder will become:

subFolderBox06
subFolderLine06
subFolderLine06MouseOver

Similarly adding "*06" to a main folder or page link will cause the class names to become mainFolderBox06, mainFolderLine06, mainFolderLine06MouseOver and linkBox06, linkLine06, linkLine06MouseOver respectively

Of course, these classes must be added to your CSS style sheet.  When you write an extra menu (emenu02.js, etc.), the small form that appears first has a check box which allows you to add the menu number to every folder and page link of the extra menu.