Milonic Home Page Information and Benefits of Milonic Products Some Samples of DHTML and JavaScript Products Download DHTML Menu Purchase Milonic JavaScript DHTML Products Tech Support Contact Milonic
Member Login - Search: Sitemap
Current Menu Version: 5.954 dated Thursday October 14 2021 Click to Download
Multiple Styles Menu

Multiple Styles Menu
The Multiple Styles Menu sample demonstrates the menus flexibility when it comes to using different text, colors and styles. There are very little restrictions when it comes to declaring these kind of properties.

Style properties can be declared in a global style, menu or menu item using the standard menu property pairs variablename="value"; declaration.

All style parameters must be entered after the with(stylename=new mm_style()){ declaration (note that you must replace the text stylename with the name of your style). Property definitions are in the 2 pair structure: propertyname="propertyvalue"; For the full list of properties that can be used within a style definition, please visit Menu Style Properties Quick Reference

If a property is not needed it can be removed from the data file completely; there is very little point declaring a variable if the default value is all that is required. This allows you to construct a menu data file using the minimum of bytes needed, assisting in a quicker download of the menu. It also helps make the data file easier to understand as it isn't full of redundant parameters.

Note that the structure of the menu data file is as close to being Object Oriented as JavaScript will allow. JavaScript itself is not an Object Oriented language but is an Object Based language.

So, from this sample you can see that each menu can have its own style if this is your requirement. Normally though, only one style is needed but there are instances where you may want the top level (horizontal) menu to have a different setup than your sub (vertical) menus. This can be achieved by declaring more than one style as you can see by the code below.

Creating different styles is useful for changing many of the properties of a style completely, but what if you only wanted to change, say one or two parameters. The most efficient way of doing this is by creating a new style based on values from another style. The copyOf() function is the tool for this job. Here is an example:

with(verticalStyle=new mm_style()){
onbgcolor = "#ECF4F9";
oncolor = "black";
offbgcolor = "#eeeeee";
offcolor = "#000000";
bordercolor = "#000000";
borderstyle = "solid";
separatorcolor = "black";
separatorsize = 1;
separatorpadding = 1;
padding = 3;
borderwidth = 1;
onborder = "1px solid black"
fontsize = "75%";
fontstyle = "normal";
fontfamily = "arial, verdana, tahoma";
pagecolor = "#bbbbbb";
pagebgcolor = "#3366cc";
subimage = "/images/arrow.gif";

horizontalStyle=new copyOf(vertStyle)
horizontalStyle.subimage = "/images/arrow_down.gif";

The above sample code, creates a global style that will be used for all vertical submenus called, verticalStyle. If you wanted to use the same style for your horizontal menu but you needed the submenu indicator image changing, you could create a copy of the verticalStyle with the copyOf() function giving your new style a name of horizontalStyle.

horizontalStyle is now an exact copy of verticalStyle and all you need to do now is change the property or properties that you require for your newly created style.

  • Dynamic Downloads are possible for the Multiple Styles Menu demo
  • The code for this menu sample will be generated on the fly and compiled into a .ZIP file format for downloading onto your own machine.

Click here to download this sample

Note that you need to be logged in to download the menus and the download delivered will depend on your current license status.

Purchase The Menu

Download DHTML Menu

See our list of Menu users

Milonic provide full featured pull down web menus for some of the worlds largest companies

Learn about how Milonic's DHTML menus can benefit your site

What does it cost? DHTML Menu prices

Who is using us?
Sample Client list

Bespoke menu design and build service from the Milonic team

Our bolt-on modules provide free optional extras for specialist projects

Free icons and images for all licensed users with our Menu Imagepack

What is Milonic up to at the moment? Check our blog