Menu G5 Step-by-step: Define the style

Just like menu content is only about menu content, the menu style in Menu G5 is also only about menu style, and we are using CSS for menu styling.

In Menu G5, we can have different types of menu items in a menu content:

sub-menu item
link item
command item (to execute some JS codes when clicked)
info item (non-clickable, just to display some content)
separator item

And for a menu instance shown on a page, it's all dhtml layers. The menu content has top-menu and may be some sub-menus, for the counterparts in the menu instance, each level of its top-menu and sub-menus consists of the following dhtml elements:

a holder layer, which is not visible but holds

a pad layer (the box around the menu items)
menu item layers, which each could hold

an image icon layer (optional)
a sub-menu tag layer (optional)
an item text layer
or
a content layer (for info item)
or
image layer(s) (for separator item)

It would be like:

<!-- holder DIV -->
<DIV class="holder">

<!-- pad DIV -->
<DIV class="pad"></DIV>

<!-- sub-menu item DIV -->
<DIV class="item">
<SPAN class="icon1">optional text for icon</SPAN>
<SPAN class="icon2">optional text for icon</SPAN>
<SPAN class="tag"></SPAN>
<SPAN class="font">item display text</SPAN>
</DIV>

<-- link/command item DIV -->
<DIV class="item">
<SPAN class="icon1">optional text for icon</SPAN>
<SPAN class="icon2">optional text for icon</SPAN>
<SPAN class="font">item display text</SPAN>
</DIV>

<-- info item DIV -->
<DIV class="item">
<SPAN class="font">info content</SPAN>
</DIV>

<-- separator DIV -->
<DIV>
<DIV class="separator1"></DIV>
<DIV class="separator2"></DIV>
</DIV>

</DIV>

So we can define CSS classes for:

the holder (IE only, for filter effects)
the pad
the item
the item text
the sub-menu tag
the image icons
the separator

The CSS class for the holder is just to apply some IE filter effects, such as:

.holder { filter: progid:DXImageTransform.Microsoft.RandomDissolve(duration=0.5); }

It should contain IE filters and the transparent property from Gecko browsers (-moz-opacity) only, of which the transition effects will be played when the top-menu or a sub-menu shows up. Besides the holder, you can also use IE filters in CSS classes for the menu item, the image icon, the sub-menu tag and the item text, the transition effects will be played when an item gets mouseovered.

Note: When IE filters are used in CSS classes for the item text, a "display:inline-block" property should be specified to set layout for the inline element (SPAN). The "background-color" property might also need to be defined accordingly.

In Menu G5, a menu item in the menu instance could have up to 4 stages: normal, highlighted, mousedowned and sub-menu opened. Info items and separator items would only have the normal stage, link items and command items could have the first 3 stages, and sub-menu items could have all of 4.

We would thus have the options to define different CSS classes for menu items at different stages, for example we could have:

.itemNormal {
  width:200px; padding:2px; border-width:2px; border-style:solid; text-align:center;
  border-color:#6699cc #003366 #003366 #6699cc; background-color:#336699;
}
.itemOn {
  width:200px; padding:2px; border-width:2px; border-style:solid; text-align:center;
  border-color:#99ccff #336699 #336699 #99ccff; background-color:#6699cc;
}
.itemDown {
  width:200px; padding:2px; border-width:2px; border-style:solid; text-align:center;
  border-color:#000033 #336699 #336699 #000033; background-color:#003366;
}

.fontNormal {
  font-family:verdana; font-size:14px;
  color:#000000;
}
.fontOn {
  font-family:verdana; font-size:14px;
  color:#ffffff;
}
.fontDown {
  font-family:verdana; font-size:14px;
  color:#ffffff;
  font-style:italic;
}

and tell the script to use class="itemNormal" for item at normal stage and class="fontNormal" for item text at normal stage, "itemOn" and "fontOn" for highlighted stage, and "itemDown" and "fontDown" for mousedowned stage, like this:

Note: If you want to use background image for menu items, define the "background:url(...)" property in the item classes and remove the "background-color" property.

As you can notice, the sub-menu tag layer and the image icon layer are just "empty" SPAN tags, we would set the background image in the CSS classes for them, for example:

.tagNormal {
  float:right; width:15px; height:15px;
  background:url("tag.jpg") no-repeat center;
}
.tagOn {
  float:right; width:15px; height:15px;
  background:url("tagOn.jpg") no-repeat center;
}
.tagDown {
  float:right; width:15px; height:15px;
  background:url("tagDown.jpg") no-repeat center;
}
.tagSubMenu {
  float:right; width:15px; height:15px;
  background:url("tagSub.jpg") no-repeat center;
}

.iconOn {
  float:left; width:15px; height:15px;
  background:url("iconOn.jpg") no-repeat center;
}
.iconDown {
  float:left; width:15px; height:15px;
  background:url("iconDown.jpg") no-repeat center;
}

The "float" property will decide to which side of the item the image should show up.

For separator items, you can use one line or two lines, both defined in the following format, for example:

.separator { background-color:#336699; }

For two lines such as:

you can have:

.separatorTopLine { background-color:#003366; }
.separatorBottomLine { background-color:#6699cc; }

By default, the line size would be just one pixel, if you have a drop-down menu, you can specify the height of the separator line:

.separator { background-color:#6699cc; height:2px; }

or if you have a menu bar:

you can specify the width:

.separator { background-color:#cc0000; width:3px; }

If you want to use image as separator, you can make it like this:

.separator { background:url("separator.gif"); }

and if you want to set the height of it for a drop-down menu:

you could have:

.separator { background:url("separator.gif"); overflow:hidden; height:6px; }

and for a menu bar:

you could have:

.separator { background:url("separator.gif"); overflow:hidden; width:6px; }

Note: Be careful when you use the margin property in CSS classes since it's not counted into the width and height of an element.

A basic rule in Menu G5 would be, use margin-top and margin-bottom only for items in drop-down menus, and margin-left and margin-right only for items in menu bar.

Setting the item-offset in the addStylePad() call would be a safe way to have the margin effect.

DO NOT use margin for non-image separators in menu bar.

Now let's look at a menu styling sample. We would have the following CSS definitions:

.holder { filter:
  progid:DXImageTransform.Microsoft.Shadow(direction=135,color=#333333,strength=3)
  progid:DXImageTransform.Microsoft.RandomDissolve(duration=0.5);
}
.bar { padding:2px; border-width:1px; border-style:solid; border-color:#000000; background-color:#336699; }

.itemTopNormal {
  filter: progid:DXImageTransform.Microsoft.Slide(slidestyle=PUSH,Bands=1,duration=0.5);
  width:130px; padding:2px; border-width:1px; border-style:solid; text-align:center;
  border-color:#6699cc #003366 #003366 #6699cc; background-color:#336699;
}
.itemTopOn {
  filter: progid:DXImageTransform.Microsoft.Slide(slidestyle=PUSH,Bands=1,duration=0.5);
  width:130px; padding:2px; border-width:1px; border-style:solid; text-align:center;
  border-color:#99ccff #003366 #003366 #99ccff; background-color:#6699cc;
}
.itemTopDown {
  filter: progid:DXImageTransform.Microsoft.Slide(slidestyle=PUSH,Bands=1,duration=0.5);
  width:130px; padding:2px; border-width:1px; border-style:solid; text-align:center;
  border-color:#000033 #6699cc #6699cc #000033; background-color:#003366;
}

.itemSubNormal {
  filter: progid:DXImageTransform.Microsoft.Slide(slidestyle=PUSH,Bands=1,duration=0.5);
  width:120px; padding:2px 2px 2px 12px; border-width:1px; border-style:solid; text-align:left;
  border-color:#6699cc #003366 #003366 #6699cc; background-color:#336699;
}
.itemSubOn {
  filter: progid:DXImageTransform.Microsoft.Slide(slidestyle=PUSH,Bands=1,duration=0.5);
  width:120px; padding:2px 2px 2px 12px; border-width:1px; border-style:solid; text-align:left;
  border-color:#99ccff #003366 #003366 #99ccff; background-color:#6699cc;
}
.itemSubDown {
  filter: progid:DXImageTransform.Microsoft.Slide(slidestyle=PUSH,Bands=1,duration=0.5);
  width:120px; padding:2px 2px 2px 12px; border-width:1px; border-style:solid; text-align:left;
  border-color:#000033 #6699cc #6699cc #000033; background-color:#003366;
}

.fontNormal {
  font-family:verdana; font-size:14px;
  color:#000000;
}
.fontOn {
  font-family:verdana; font-size:14px;
  color:#ffffff;
}
.fontDown {
  font-family:verdana; font-size:14px;
  color:#ffffff;
  font-style:italic;
}

.tagNormal {
  float:right; width:10px; height:10px;
  background:url("images/tagRN2.gif") no-repeat center;
}
.tagOn {
  float:right; width:10px; height:10px;
  background:url("images/tagRH2.gif") no-repeat center;
}
.tagDown {
  float:right; width:10px; height:10px;
  background:url("images/tagRD2.gif") no-repeat center;
}

It shows that we would like to apply a shadow filter and a random dissolve filter to the top-menu and the sub-menus when they show up, and to apply a pushing band filter to menu items when they are mouseovered. The text in top-menu items would be centralized but stay left in sub-menus, and finally to set the font style to italic when items are mousedowned.

And our menu bar would look like this: [show]

Note: When you set the "width" property for the item CSS class, be sure to turn on the CSS-compliance mode for IE and Opera (include a DTD line in your page).

Update for IE/Mac and Safari: For css style defined in format of "class1 class2" in those addStyleXX() calls, IE/Mac and Safari can't handle them correctly. To workaround this issue, we need to combine the previously separated classes into one class for each item stage.

Well, the menu content and the menu styles are all done, but how do we tell the script to apply which styles to which part of the menu content for our menu instances? Good question. That would be our next topic.

[Apply the style] [Back to index page]

# # #