Styling the Menu - Part I - Using One Style

Poster: Ruth
Dated: Saturday July 17 2004 - 3:20:09 BST

Style is what your menu will look like, sort of like laying out the clothes you will wear.
There are 3 areas that style parameters can be applied.

1. The style section which will apply to all menus that have that style called
2. The menu section which will apply the listed parameters to that menu
3. The item which will apply the listed parameters to that item.

Not every property will be applicable or usable in each section. These documents provide more detailed information on which properties can be applied in each. They can be found on the milonic home page under Support - Menu Quick Reference Guides.
style properties
menu properties
item properties

This post will focus on the Style section. If you don't have any trouble creating a single style, you might want to go to Part II which references multiple styles, or Part III which show how to use a shortcut to create two or more styles.

PART I. Setting one style for all menus and submenus.

Style goes in the section which begins: with(menuStyle=new mm_style()){
The term menuStyle is the name given to the style in the file you downloaded, but you can name it anything you want. Many use terms that give a reminder of just where the style is used i.e. mainStyle, subStyle, linksStyle, searchStyle etc.

The following is what I am including as the minimum design for a menu.

bgcolor [both the on and off background color]
color [both the on and off color [of text]
border [needs color, size, and style- which can be: none, dotted, dashed, solid, double, groove, ridge, inset, outset]
separator [needs color, size]
font [best to include type, size, style, [normal, italic] and weight [normal,bold]
padding
align [where the TEXT [not the menu] will align: left, right or center]

Using the defined style below, the menu will look like this:


with(menuStyle=new mm_style()){
onbgcolor="#000000";
oncolor="#ffffff";
offbgcolor="#ffffff";
offcolor="#FF0000";
bordercolor="#FF0000";
borderstyle="solid";
borderwidth=1;
separatorcolor="#FF0000";
separatorsize=1;
padding=2;
fontsize="11px";
fontstyle="normal";
fontweight="normal";
fontfamily="Verdana, Tahoma, Arial";
align="center"
}

The style name you use, in this case menuStyle will be put into each menu for which you want that style to appear:

with(milonic=new menuname("Main Menu")){
style=menuStyle;
________________________


Final Notes
The TWO most important things to remember:

If property is only a number with no letters or symbols do not use quote marks, [some downloads still have quote marks in them from the older versions, do not use them, it usually makes no difference but some browsers are extremely picky] in all other cases you quotes. Thus you would code like this: borderwidth=1; but borderwidth="1px";

Don't forget the semi-colons!