Styling the menu - Part III - copyOf shortcut

Poster: Ruth
Dated: Friday July 16 2004 - 21:29:47 BST

PART III Shortcuts, using copyOf method to create more styles.
The style from which the copyOf is made is listed below as mainStyle.
This method is extremely useful for creating multiple styles in which all you wish to change are a few items. Personally, if I were changing everything I would use the copy and paste method listed in part II, but for changing just a few items copyOf is the better way to create the other styles. It is shorter and therefore contains less data upon which to make mistakes

As an example, this will change the bgcolors and font colors of the original style created in Part I. You would be renaming the style as in the copy and paste method, but only listing the color changes as shown below:

subStyle=new copyOf(mainStyle);
subStyle.onbgcolor="#d9e6e6";
subStyle.oncolor="#4b969a";
subStyle.offbgcolor="#4b969a";
subStyle.offcolor="#d9e6e6";

Take note of a few things. There are no { at beginning and } at the end. The first line ends with a semi-colon, as do all the other lines, and note the style name subStyle followed by a period and then the property onbgcolor etc.

This can be repeated any number of times just naming each one differently, so you could again have a different style for each menu.

It is also useful to change subimages. For example, maybe you have one level of submenus on which you want to use a different subimage and yet keep everthing else the same. You could then put

subStyle1=new copyOf(mainStyle);
subStyle1.subimage="mydifferentarrow.gif";



The style section of your menu_data.js file would then have 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"
}


subStyle=new copyOf(mainStyle);
subStyle.onbgcolor="#d9e6e6";
subStyle.oncolor="#4b969a";
subStyle.offbgcolor="#4b969a";
subStyle.offcolor="#d9e6e6";

subStyle1=new copyOf(mainStyle);
subStyle1.subimage="mydifferentarrow.gif";

You would then assign whichever style to the menus as you choose.

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!