Setting Options

These options are all found in the file "code.html". Any other options, like changing the images can be done without touching the menu-code. If you want other images just replace all the images you have now with some others.

Ok... pull code.html up in your HTML authoring tool and have a look at it. It probably looks pretty confusing at first, but setting options won't be difficult. Right there close to the top you'll find the comment that says "User-configurable options". Here are the variables explained:

var MTMTableWidth = "100%";

Width of the table that's used for the menu. Change this is you want a different width. Setting it to a fixed pixel width by using a number without percentages is also possible. Remember that if you set the width wider than the frame with the menu in it the users with get a scroll bar, and that looks kind of stupid.

var MTMenuFrame = "menu";

This is the name of the frame where you want the menu to appear. A smart thing is probably to keep calling the frame "menu" so you don't forget what it contains.

var MTMSubsGetPlus = true;

This controls plus-signs next to sub-menus. The original script that Mike Hall wrote puts a plus-sign next to a sub-menu only when it contains other sub-menus. I wanted a plus-sign next to all sub-menus, so I created this option. Setting it to "true" gives a plus-sign next to all sub-menus, setting it to "false" will give the original script's behaviour.

var MTMEmulateWE = false;

This controls whether the menu will emulate Windows Explorer when a submenu has a URL attached to it. If it's set to true all submenus will have a +/- sign and only the +/- sign will expand/collapse the submenu. The folder image and the item's text will point to the URL. Set it to false and MTMSubsGetPlus will determine whether a +/- sign appears next to the submenu. A collapsed submenu will then expand & the URL be shown when clicked on. To collapse click either the +/- sign (if present) or the folder image. The item text shows the URL.

var MTMenuImageDirectory = "menu-images/";

The directory where you have the images for the menu. This directory is relative to the directory where code.html resides. The name has to have a trailing slash. If you specify any images for a link remember that the URL of that image is relative to this directory. If you have your images in the same directory as all your HTML-files use "" (two double-quotes).

var MTMBGColor = "#000033";
var MTMBackground = "blueback.jpg";
var MTMTextColor = "#ffffcc";
var MTMLinkColor = "lime";
var MTMAhoverColor = "red";
var MTMTrackColor ="yellow";
var MTMSubExpandColor = "white"
var MTMSubClosedColor = "white"

This is the color and background image settings for the menu. It's all regular HTML color coding (except for the background image), you'll have to change them to fit your own color schemes. MTMBackground is to be set to "" if you don't have a background image. The other options are: background color, text color for all non-item text, color for all menu items, hover color (when mouse pointer is over an item, only supported by IE4 & IE5), tracked item color, color for a submenu when it has recently been expanded, and same for a closed submenu. The background image is to be put in the menu-image directory that was previously set.

var MTMRootIcon = "menu_root.gif";
var MTMenuText = "Site contents:";
var MTMRootColor = "white";
var MTMRootFont = "Arial, Helvetica, sans-serif";
var MTMRootCSSize = "84%";
var MTMRootFontSize = "-1";

These six options control how the root icon, the text next to it, and the color and font the text has. The font is specified using regular HTML font face attributes, a comma-separated list of fonts to use. There's two options for specifying the font size, one for those with CSS support and one for those without. Just like for the background image the root icon resides in the menu-image directory.

var MTMenuFont = "Arial, Helvetica, sans-serif";
var MTMenuCSSize = "84%";
var MTMenuFontSize = "-1";

The font and font size to be used for all menu items. The color is previously defined.

var MTMLinkedSS = true;
var MTMSSHREF = "style/menu.css";

These two variables control the use of a linked style sheet. I use style sheets quite a lot myself and therefore wanted the script to be able to use them too. The first variable is a true/false variable. "True" means that you want to use a linked style sheet, false means the script doesn't use style sheets (except that is makes all links not underlined). If you set the variable to "true" you also have to set the URL of the style sheet. This is of course done with the other variable, "MTMSSHREF". The URL is then written to a regular style sheet link in the menu. Keep in mind that the URL to the linked style sheet is relative to the directory where code.html resides, just as with the menu images.

var MTMSubsAutoClose = false;

This option controls auto-closing of open sub-menus. Set it to false and sub-menus are opened/closed as the user specifies. Set it to true and the user will only be able to have one sub-menu open at a time. The menu will automagically close open sub-menus when the user tries to open another sub-menu.

var MTMTimeOut = 25;

MTMTimeOut specifies a timeout period in tenths of a second (1/10). The shown value of 25 thereby means 2.5 seconds. This value is only used when the menu is loaded for the first time (when the user enters your site) or when the frameset (and thereby code.html) is reloaded. The onload event in code.html calls a poll function which waits for the timeout to pass. Each 1/10 second it checks whether a content page has called MTMDisplayMenu() meaning that menu is shown to the user. If that hasn't happened, and the timeout period has passed, the poll function will call MTMDisplayMenu() and show the menu to the user.

That's all the options currently available. Once you've set all to the values you want to you can go on to Part 3: Making the menu.


Morten Wang <warnckew@online.no>
Last modified 2000-02-06 21:42