Styling the menu - Part II - creating multiple styles

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

PART II Creating multiple styles using the time honored copy and paste method.
Probably the most used way to create a second style - and easiest in the sense that it is something with which most are familiar - is to highlight, copy and paste the existing style into the menu data file below the style you created for your main menu; change the style name, then change all the aspects you want to be different. In this example, I used the original style created in Part I [seen as mainStyle below], and then changed everything. The resulting menu_data.js file would have the 1st style called mainStyle followed by the 2nd one called subStyle. Once you create the two styles you will need to assign each one to the menus which you wish to employ that style. Using this method you could define a totally different style for every menu, just copy, paste and change for however many styles you create making sure you rename each one created. Finally, assign the style you want to its menu. The results for the two styles created here would be this:


with(mainStyle=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"
}

with(subStyle=new mm_style()){
onbgcolor="#FFFF99";
oncolor="#6699FF";
offbgcolor="#6699FF";
offcolor="#FFFF99";
bordercolor="#99FF99";
borderstyle="solid";
borderwidth=2;
separatorcolor="#99FF99";
separatorsize="2";
padding=4;
fontsize="14px";
fontstyle="italic";
fontweight="bold";
fontfamily="New Times Roman, Courier New, Brochure";
align="left"
}

________________

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!