This is not a tutorial in CSS. There is no explanation of how various css properties work, how they should be used nor is it a complete overview of all css properties that might be applied to the menu. It contains some simple explanations of the menu properties, using css classes and applying them to the menu. It contains a selection of simple examples of css styled menus which can be used as a base. I deliberately didn't do any 'fixing' based on browsers so that these differences will be kept in mind when using css to style the menu.

Overview

• Styling properties of the menu The Milonic Menu has two states, the off state when the mouse is not on the menu, and the on state when the mouse is on the menu. Within the menu system there are what might be classified as different types of styling properties.
  • Single properties.  These properties apply to the menu in both the off and on state. They include properties such as align, margin, and padding.

  • Dual properties. These properties have two forms, one for the off state of the menu and one for the on state. These would be properties such as offbgcolor, onbgcolor, offcolor and oncolor.

  • Single properties which also have a corresponding 'dual' property. These properties apply to the menu in both the off and on state but also have a second 'dual' property which can be used to make a change in the on state. An example of these would be border, which applies in both states and its corresponding onborder. Onborder leaves the already coded border in place in both states but in the on state it 'adds' the coded onborder to each individual item as the mouse is placed over it.

• Offclass and Onclass properties  Two properties within the Milonic menu system allow the application of css styles using css classes. These properties can be used to apply a css style to the menu as a whole or one or more items only.

• Using a custom css class in the menu 
  • Create the class in the stylesheet or in the head of the document within <style> </style> tags.
    • .mmpadding{padding-top:1px;padding-right:2px;padding-bottom:2px;padding-left:4px}

  • Call the class using the offclass and onclass properties of the menu. It is necessary to use both the offclass and onclass in order to have the class apply to both the off and on states of the menu
  • Apply the class in a style in order to apply it to all items in all menus using that style
    

     with(menuStyle=new mm_style()){
     offclass="mmpadding";
     onclass="mmpadding";

  • Apply the class in an item or multiple items to limit it to only those items

    aI("status=Back To Home Page;text=Home;url=http://www.milonic.com/;
    offclass=mmpadding;onclass=mmpadding;");

View Examples

1. The examples in the demo are divided into 4 types. Each example has a beginning header with the style number in it. The css styling does not apply to the header. The first 3 types [styles 1 through 6] have no submenus:
   • The first example, creatively called 'style 1' applies one css property, padding. The rest of the properties are set in the menuStyle as usual.

   • The second, creatively called 'style 2' applies padding using css in an aI string to apply a padding change in only one item.

   • Examples 3 through 6 apply various css properties and no properties in the menuStyle other than the required offclass and onclass in order to apply the css styling.

   • The last example uses the full Milonic menu with submenus and creates different css styles for the main menu and the submenus. The main menu contains no Milonic style properties while the submenu is styled using both css classes and Milonic style properties in the menu data file.

2. All the css is placed into one stylesheet. All the classes have the same base name of menuOff and menuOn, and each includes a number related to the example. So for the style 1 example the classes would be .menuOff1 and .menuOn1, for style 2, .menuOff2 and .menuOn2 and so on.

3. Each example has the related css style code shown below it. The menus on this page are placed using relative positioning and inside the table because it is easier for layout purposes. It is not required that you position a menu relatively in order to use css styling.

DHTML Menu courtesy of  Milonic Solutions
DOWNLOAD the stylesheet and data file.