Style Properties

Any CSS definition can be used to control colors, fonts, sizes, etc. For example to set font size use "font-size: 10pt;" in div, tbl, td, style parameters of m4w.m(), m4w.i(), m4w.e() methods. Propagating rules of CSS styles are applied in menu4web. For example setting size in menu will affect the entire menu while setting it for an item will affect just that item. In general your ability to control size, font and shape is as good in menu4web as using CSS abilities.

The following special properties are also available to control the menu style:

orientation: (vertical | horizontal) - sets menu orientation.
alwaysvisible: (false | true) - sets menu visibility.
keepalive: (false | true) - if menu is displayed it will stay visible until another menu is selected.
opendirection: (right | down | left | up) - open direction for submenus.
openonclick: (false | true) - menu will be opening submenus on click vs. on mouse over.
pos-left: (+ | - XXpx) - left menu position adjustment.
pos-top: (+ | - XXpx) - top menu position adjustment.

Style Shortcuts

You have a choice of setting styles by passing div, tbl, td parameters to the m4w.m(), m4w.i(), m4w.e() methods or by passing style parameter to m4w.m(). In this case “shortcut” syntaxes should be used. For example to set a style for menu div values have to be prefixed with "mdiv-", "mtbl-" is a prefix for menu table, "etd-" is table cell prefix etc. So in general the prefixing goes as the following:

mdiv- menu div.
mtbl- menu table.
itd- item cell.
itbl- item table.
etd- element cell.

For example m4w.m(id, div, tbl, "etd-background: blue;") and m4w.e(id, im, el, co, "background: blue;") will give same result. But the first syntaxes could be shorter since each menu will have many elements. To avoid repetitions it makes sense to move repeating style definitions up to m4w.m() method.

Last edited Sep 27, 2012 at 2:48 PM by sn41, version 22


No comments yet.