Styling the menu - Part II - creating multiple styles

Hosted by Ruth, this section is for those brand new to the menu. We won't teach you HTML, but we will help get your menu experience off to a good start.
Locked
User avatar
Ruth
 Team
 Team
Posts: 8761
Joined: Thu May 15, 2003 5:02 am
Location: Yucaipa, CA
Contact:

Styling the menu - Part II - creating multiple styles

Post by Ruth » Sat Jul 17, 2004 3:17 am

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:
Image

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!

Locked