The following explains each of the parameters available when defining your menu items within "config.js". Study the below closely along with live examples within "config.js' to set up your menu precisely the way you want:

Description of each parameter for menu[x], from 1st to last:

1) This parameter controls the set size of the menu. If the menu is horizontal, it refers to the height of the menu. If the menu is vertical, then it refers to the width of the menu. The number is measured in pixels. (125)

2) This parameter sets type of menu to be displayed. The menu can be laid out horizontally, by inputting "horizontal", and vertically, by inputting "vertical". ("vertical")

3) Plainly put, this parameter sets the horizontal coordinate of where the menu is to be displayed. If the menu is a sub-menu, then this parameter can be left as zero, since sub-menus are positioned dynamically. (10)

4) If you already read the last parameter's description, then you probably guessed that this one is the vertical coordinate of the menu. You're right. This paramter adheres to the same options as the x coordinate does. (10)

5) This is the horizontal offset (in pixels) to use when showing a new menu from this menu. A positive value moves the new menu right and a negative value will move a new menu left. (-1)

6) This is the vertical offset (in pixels) to use when showing a new menu from this menu. A positive value moves the new menu down and a negative value will move a new menu up. (-1)

7) This one is the normal background color of each item, a.k.a. the color that is default for each item of the menu. It can be set with the name of the color, or with the hexadecimal value of the color. If you don't know what hexadecimal means, then just ignore the last part of the previous sentence. ("white")

8) This paramter is just the background color of each item when the viewer mouses over that item. It involves the same types of inputs as the normal background color parameter does. ("black")

9) This parameter refers to the name of the font used for item text. Preferably, this should be set to a font that is common on most systems like Verdana or Times, but it can also be set to multiple fonts by separating them with a comma like "Verdana,Helvetica" so the font would be similar even if a Mac was running the script. ("MS Sans Serif")

10) Simply put, this parameter describes the point size of the font. If you are unfamiliar with point size, check out Microsoft Word. It measures all its fonts in points. (9)

11) This parameter can have multiple, space-separated values. It can contain one or up to all three of the following font style values: bold, italic and underline. Try not to use all three though. It might cause some strange looking results. This style is for when the mouse is NOT over an item.  ("bold")

12) This parameter can have multiple, space-separated values. It can contain one or up to all three of the following font style values: bold, italic and underline. Try not to use all three though. It might cause some strange looking results. This style is for when the mouse is over an item. ("bold")

13) This is the normal color of item text. Like the background color, it can be set with the name or the hexadecimal value of the desired color. ("black")

14) This is just like the background color on mouse over, except it refers to the text of each item, not the background. ("white")

15) This parameter describes the size of the border around the menu, and if desired, each item. It is measured in pixels. (2)

16) What more do you want? This is the color of the border around the menu and, if chosen, each menu item. It is input just like the background and text colors are. ("black")

17) This one could be described as the margins for item content from each side of the item. But I like to think of it as the padding around the content of each item or the distance between the edge of an item and its content. This parameter is measured in pixels. (2)

18) This is the character that is displayed on the far right side of an item if that item opens a sub-menu. It can be a letter like "v", or a number corresponding to a ASCII character like 62 for >. If you use a number, please do not surround the it in quotes. A roll over can be used by putting in "rollover:img1.jpg:img2.jpg" or the like. ("v")

19) This parameter tells the script to display sub-menus opened from this menu with a mouse click, instead of opening the sub-menus with a mouse over. That's it in a nutshell. (false)

20) This parameter tells the script to separate each menu item with a divider, which is the same size and color as the menu's border. This should normally be done for effect or for readability. (true)

21) Like the window title says, this parameter defines a main menu if set to true. That means that this menu will be displayed when the page loads, instead of on a mouse over or mouse click. (true)

22) This parameter, if set to true, will tell the script to display sub-menus using a transitional effect, given by you, the programmer, in the next parameter. These transitions will only work in PC versions of Internet Explorer numbered 5.5 and above. (false)

23) This is a number from 1 to 23 setting the type of transition to display, if transitions are set to true and the browser is of the correct type. The Microsoft HTML/DHTML help file and numerous Javascript and DHTML books will define these numbered transitions for you. You can set this to zero if you set the previous parameter to false. (0)

24) This tells the build script whether or not to create a shadow for the menu. It's your standard true/false value. (true)

25) This parameter defines how far away from the menu the shadow should be displayed, horizontally. It is measured in pixels, and negative values can be used. (5)

26) This parameter defines how far away from the menu the shadow should be displayed, vertically. It is measured in pixels, and negative values can be used. (5)

27) This is the color of the shadow. It can be a color name like "white", or a hex value like "#FFFFFF". Make sure that the color is something that befits a shadow. You don't want a yellow shadow for a black menu, although it is possible for you to define that here. ("gray")

Description of each parameter for menu[x].addItem(), from 1st to last:

1) This parameter defines the link that the item can go to upon being clicked. This can be a local link, or a global link like "http://www.yahoo.com". You can also add Javascript in by coding "javascript:code" into the parameter. If you use a string inside the Javascript code segment, you'll have to surround the string like so: "javascript:alert('Alerting')". (#)

2) Optional link target. Set it to arbitrary "NEWWIN" to open this menu item in a new window, "FRAMENAME" to open in a specific frame, or "" for no target. ("win2")

3) This is the set size of each item, dependent upon the layout of the menu. It is the height if the menu is vertical, and the width if the menu is horizontal. (100)

4) This parameter defines the alignment for item content. It can be "center", "left" or "right". Don't put anything else in this parameter, NOTHING ELSE!!! ("center")

5) Like the title states, this is the item content parameter, here you can put the item text, or by putting in "rollover:image1.jpg:image2.jpg" or the like you can make the item into a roll over cell. ("Home")

6) This is the number of the menu to show from this particular item on mouse over or on mouse click. There is one warning with this parameter though. Do not try to open the same sub-menu for two different parent menus, as this will bring up a Javascript error. Also, please put in zero if the item doesn't open a sub-menu (0)

Description for function menu.floatMenu()

Invoke this function to float the main menu, so it remains relatively positioned on the page (see "example3.htm" for demo). Here's an example:

menus[0].floatMenu(1024, 768, 10, 0);

1024 is the base screen width (i.e. the screen width the menu was originally positioned on) and the 768 is the corresponding screen height. The 0 is how you want the menu's positioned (i.e. horizontally, vertically or both [0, 1, 2]).

Additional Notes:

To add the menus to a page, put the following in your BODY tag: onload="init()". Do not define a CSS style directly for the body tag. The Netscape 4 version of this script uses internal body tags within layers to create the menus. Define the CSS style by using a class name (for your document's body tag).

Also, remember to set the "buildDir" variable in the file browser.js. It maps the build files to the page that will display the menu.

Click here for browser compatibility information.

Below is a short description of the browsers that are compatible and incompatible with this script. If the Macintosh versions are not listed with a browser, then either the browser isn't available in Mac format, or the browser is virtually the same between a PC and a Mac, and the menu will function similarly in both.

©2003-2004. By Jim Salyer & Dynamic Drive.