<p>Style phrases are in "name<b>:</b>value<b>;</b>" format. When a phrase is missing, its default setting will be taken.</p>
<p>Following are style phrases available:</p>
<table cellspacing="1" cellpadding="0" bgcolor="#666666"><tr bgcolor="#ffffff"><td>
<table cellspacing="1" cellpadding="6" bgcolor="#ffffff">
<tr valign="top" bgcolor="#cccccc"><td nowrap>Name</td><td>Value</td></tr>

<tr valign="top" bgcolor="#f0f0f0"><td nowrap>holder-css</td><td>CSS classes for the menu holder, usually IE effects on the whole menu will apply here.</td></tr>

<tr valign="top" bgcolor="#f0f0ff"><td nowrap>pad-css</td><td>CSS classes for the menu pad, usually for settings of border, background and padding</td></tr>

<tr valign="top" bgcolor="#f0f0f0">
<td nowrap>menu-form</td>
<td>
<p>string that specifies one of the following values:</p>
<ul>
<li>bar ... To be shown as a horizontal menu bar.</li>
<li><u>pad</u> ... Default. To be shown as a drop-down menu pad.</li>
</ul>
</td>
</tr>

<tr valign="top" bgcolor="#f0f0ff">
<td nowrap>direction</td>
<td>
<p>string that specifies one of the following values:</p>

<ul>
<li><u>right-down</u> ... Default. If the parent menu is a menu pad, show the sub-menu on right side and align the sub-menu and its parent item on top. If the parent menu is a menu bar, show the sub-menu below and align the sub-menu and its parent item on left side.</li>
<li>right-up ... For menu pad, show the sub-menu on right side and align the sub-menu and its parent item on bottom. For menu bar, show the sub-menu above and align the sub-menu and its parent item on left side.</li>
<li>left-down ... For menu pad, show the sub-menu on left side and align the sub-menu and its parent item on top. For menu bar, show the sub-menu below and align the sub-menu and its parent item on right side.</li>
<li>left-up ... For menu pad, show the sub-menu on left side and align the sub-menu and its parent item on bottom. For menu bar, show the sub-menu above and align the sub-menu and its parent item on right side.</li>
<li>center-down ... For menu bar only. Show the sub-menu below and align the sub-menu and its parent item on center.</li>
<li>center-up ... For menu bar only. Show the sub-menu above and align the sub-menu and its parent item on center.</li>
<li>abs-right-down ... For menu bar only. Show the sub-menu below and align the sub-menu and parent menu on right side.</li>
<li>abs-right-up ... For menu bar only. Show the sub-menu above and align the sub-menu and parent menu on right side.</li>
<li>abs-left-down ... For menu bar only. Show the sub-menu below and align the sub-menu and parent menu on left side.</li>
<li>abs-left-up ... For menu bar only. Show the sub-menu above and align the sub-menu and parent menu on left side.</li>
<li>abs-center-down ... For menu bar only. Show the sub-menu below and align the sub-menu and parent menu on center.</li>
<li>abs-center-up ... For menu bar only. Show the sub-menu above and align the sub-menu and parent menu on center.</li>
<li>right-top ... For menu pad only. Show the sub-menu on right side and align the sub-menu and parent menu on top.</li>
<li>left-top ... For menu pad only. Show the sub-menu on left side and align the sub-menu and parent menu on top.</li>
<li>right-middle ... For menu pad only. Show the sub-menu on right side and align the sub-menu and parent menu in middle.</li>
<li>left-middle ... For menu pad only. Show the sub-menu on left side and align the sub-menu and parent menu in middle.</li>
<li>right-bottom ... For menu pad only. Show the sub-menu on right side and align the sub-menu and parent menu on bottom.</li>
<li>left-bottom ... For menu pad only. Show the sub-menu on left side and align the sub-menu and parent menu on bottom.</li>
</ul>
</td>
</tr>

<tr valign="top" bgcolor="#f0f0f0">
<td nowrap>scroll</td>
<td>
<p>string that specifies one of the following values:</p>
<ul>
<li>both ... For a out-of-border long menu, when the menu item that is next to the border is mouseovered, scroll it into view.</li>
<li>x-only ... Only scroll in x-direction.</li>
<li>y-only ... Only scroll in y-direction.</li>
<li><u>none</u> ... Default. Don't scroll the menu.</li>
</ul>
</td>
</tr>

<tr valign="top" bgcolor="#f0f0ff">
<td nowrap>step</td>
<td>
<p>number that specifies one of the following values:</p>
<ul>
<li><u>0</u> ... Default. For the out-of-border long menu, scroll in one menu item each time.</li>
<li>any non-zero integer ... Number of pixels to scroll in each time.</li>
</ul>
</td>
</tr>

<tr valign="top" bgcolor="#f0f0f0">
<td nowrap>flip</td>
<td>
<p>string that specifies one of the following values:</p>
<ul>
<li><u>yes</u> ... Default. If a sub-menu goes beyond the browser border, flip it to the other side of its parent menu.</li>
<li>no ... Don't flip the sub-menu.</li>
</ul>
</td>
</tr>

<tr valign="top" bgcolor="#f0f0ff">
<td nowrap>offset-top</td>
<td>
<p>number that specifies the top offset in pixel (after the direction placement), defaults to 0.</p>
</td>
</tr>

<tr valign="top" bgcolor="#f0f0f0">
<td nowrap>offset-left</td>
<td>
<p>number that specifies the left offset in pixel (after the direction placement), defaults to 0.</p>
</td>
</tr>

<tr valign="top" bgcolor="#f0f0ff">
<td nowrap>item-offset</td>
<td>
<p>up to two numbers (can be negative) separated by space, specifying the offsets in pixel between menu items, defaults to 0.</p>
</td>
</tr>

<tr valign="top" bgcolor="#f0f0f0">
<td nowrap>col</td>
<td>
<p>number of menu item column in a pad.</p>
</td>
</tr>

<tr valign="top" bgcolor="#f0f0ff">
<td nowrap>row</td>
<td>
<p>number of menu item row in a pad.</p>
</td>
</tr>

<tr valign="top" bgcolor="#f0f0f0">
<td nowrap>filters<br>(IE only)</td>
<td>
<p>up to two strings separated by space or comma, each specifying one of the following values:</p>
<ul>
<li>yes ... Show IE transition filters.</li>
<li>no ... Do not show IE transition filters.</li>
</ul>
<p>the first string sets value for when a menu pad shows up, defaults to yes; the second string if present sets value for when a menu pad hides, defaults to no.</p>
<p>For example:</p>
<p class="note">filters<b>:</b> yes<b>,</b> no<b>;</b></p>
</td>
</tr>

<tr valign="top" bgcolor="#f0f0ff">
<td nowrap>tiles</td>
<td>
<p>specify the background tile images for the menu pad in the following format:</p>
<p class="note">
tiles<b>:</b> width<b>,</b> height <b>:</b> css1<b>,</b> css2<b>,</b> css3<b>,</b> css4<b>,</b> css5<b>,</b> css6<b>,</b> css7<b>,</b> css8<b>,</b> css9<b>;</b>
</p>
<p>in which the width and the height specify the size of the corners, and css1 to css9 specify the background images for the tiles.</p>
<p>depending on the width and the height, the tiles can be:</p>
<table border="1" cellpadding="6">
<tr>
<td>width>0, height>0</td>
<td>width=0, height>0</td>
<td>width>0, height=0</td>
</tr>
<tr>
<td>
<table cellspacing="1" cellpadding="0" border="0">
<tr align="center" bgcolor="#cccccc"><td width="40" height="40">css1</td><td width="40">css2</td><td width="40">css3</td></tr>
<tr align="center" bgcolor="#cccccc"><td width="40" height="40">css4</td><td width="40">css5</td><td width="40">css6</td></tr>
<tr align="center" bgcolor="#cccccc"><td width="40" height="40">css7</td><td width="40">css8</td><td width="40">css9</td></tr>
</table>
</td>
<td>
<table cellspacing="1" cellpadding="0" border="0">
<tr align="center" bgcolor="#cccccc"><td width="120" height="40">css2</td></tr>
<tr align="center" bgcolor="#cccccc"><td width="120" height="40">css5</td></tr>
<tr align="center" bgcolor="#cccccc"><td width="120" height="40">css8</td></tr>
</table>
</td>
<td>
<table cellspacing="1" cellpadding="0" border="0">
<tr align="center" bgcolor="#cccccc"><td width="40" height="120">css4</td><td width="40">css5</td><td width="40">css6</td></tr>
</table>
</td>
</tr>
</table><br clear="all">
<p>usually the background images defined for css1, css3, css7 and css9 would fill the corners, and images for css2, css4, css5, css6 and css8 would be repeatable to connect the corners.</p>
</td>
</tr>
</table>
</td></tr></table><br clear="all">

<br><li>Define an item style:</li>
<pre>
addStyleItem("item-style-name", "item-style-phrases");
</pre>

<p>Style phrases are in "name<b>:</b>value<b>;</b>" format. Following are style phrases available:</p>
<table cellspacing="1" cellpadding="0" bgcolor="#666666"><tr bgcolor="#ffffff"><td>
<table cellspacing="1" cellpadding="6" bgcolor="#ffffff">
<tr valign="top" bgcolor="#cccccc"><td nowrap>Name</td><td>Value</td></tr>

<tr valign="top" bgcolor="#f0f0f0">
<td nowrap>css</td>
<td>
<p>up to five groups of CSS classes separated by comma, specifying the styles for menu item on following stages:</p>
<ul>
<li>normal ... Without mouse focus.</li>
<li>highlighted ... With mouse focus.</li>
<li>mousedowned ... With mouse focus and mouse left-button pressed.</li>
<li>sub-menu opened ... For a sub-menu item with sub-menu opened.</li>
<li>on-path ... When page path is called to display.</li>
</ul>
<p>If the style for a stage is not needed, it can be left blank (keep the comma to indicate it's blank). If some groups are not present, say only three groups are defined, then "sub-menu opened" and "on-path" will not have special style effects.</p>
</td>
</tr>

<tr valign="top" bgcolor="#f0f0ff">
<td nowrap>cursor</td>
<td>
<p>CSS classes that specify the cursor style when a menu item gets mouse focus.</p>
</td>
</tr>

<tr valign="top" bgcolor="#f0f0f0">
<td nowrap>align</td>
<td>
<p>string that specifies one of the following values (when a menu item has different sizes at different stages):</p>
<ul>
<li>left ... Align a menu item on the left side for different stages.</li>
<li><u>center</u> ... Default. Align a menu item on center.</li>
<li>right ... Align a menu item on the right side.</li>
</ul>
</td>
</tr>

<tr valign="top" bgcolor="#f0f0ff">
<td nowrap>valign</td>
<td>
<p>string that specifies one of the following values (when a menu item has different sizes at different stages):</p>
<ul>
<li>top ... Align a menu item on the top for different stages.</li>
<li><u>middle</u> ... Default. Align a menu item in middle.</li>
<li>bottom ... Align a menu item on bottom.</li>
</ul>
</td>
</tr>

<tr valign="top" bgcolor="#f0f0f0">
<td nowrap>width</td>
<td>
<p>actual ... Indicates that the CSS classes have not specified a width for the menu items.</p>
</td>
</tr>

<tr valign="top" bgcolor="#f0f0ff">
<td nowrap>sub-menu</td>
<td>
<p>string that specifies one of the following values:</p>
<ul>
<li><u>mouse-over</u> ... Default. Hover a sub-menu item to open its sub-menu.</li>
<li>mouse-click ... Click a sub-menu item to open its sub-menu.</li>
</ul>
</td>
</tr>

<tr valign="top" bgcolor="#f0f0f0">
<td nowrap>filters<br>(IE only)</td>
<td>
<p>up to three strings separated by space or comma, each specifying one of the following values:</p>
<ul>
<li>yes ... Show IE transition filters.</li>
<li>no ... Do not show IE transition filters.</li>
</ul>
<p>the first string sets value for when a menu item changes back to normal stage (mouseout), defaults to no; the second string if present sets value for when a menu item becomes highlighted (mouseover), defaults to yes; the third string if present sets value for when a menu item gets mousedown, defaults to no.</p>
<p>For example:</p>
<p class="note">filters<b>:</b> yes<b>,</b> yes<b>,</b> yes<b>;</b></p>
</td>
</tr>
</table>
</td></tr></table><br clear="all">

<br><li>Define a font style:</li>
<pre>
addStyleFont("font-style-name", "font-style-phrase");
</pre>
<p>Only one phrase is available:</p>
<table cellspacing="1" cellpadding="0" bgcolor="#666666"><tr bgcolor="#ffffff"><td>
<table cellspacing="1" cellpadding="6" bgcolor="#ffffff">
<tr valign="top" bgcolor="#cccccc"><td nowrap>Name</td><td>Value</td></tr>

<tr valign="top" bgcolor="#f0f0f0">
<td nowrap>css</td>
<td>
<p>up to five groups of CSS classes separated by comma, specifying the font styles for menu item on following stages:</p>
<ul>
<li>normal ... Without mouse focus.</li>
<li>highlighted ... With mouse focus.</li>
<li>mousedowned ... With mouse focus and mouse left-button pressed.</li>
<li>sub-menu opened ... For a sub-menu item with sub-menu opened.</li>
<li>on-path ... When page path is called to display.</li>
</ul>
<p>If the style for a stage is not needed, it can be left blank (keep the comma to indicate it's blank). If some groups are not present, say only three groups are defined, then "sub-menu opened" and "on-path" will not have special style effects.</p>
</td>
</tr>
</table>
</td></tr></table><br clear="all">

<br><li>Define a sub-menu tag style:</li>
<pre>
addStyleTag("tag-style-name", "tag-style-phrase");
</pre>
<p>Only one phrase is available:</p>
<table cellspacing="1" cellpadding="0" bgcolor="#666666"><tr bgcolor="#ffffff"><td>
<table cellspacing="1" cellpadding="6" bgcolor="#ffffff">
<tr valign="top" bgcolor="#cccccc"><td nowrap>Name</td><td>Value</td></tr>

<tr valign="top" bgcolor="#f0f0f0">
<td nowrap>css</td>
<td>
<p>up to five groups of CSS classes separated by comma, specifying the sub-menu tag styles for sub-menu item on following stages:</p>
<ul>
<li>normal ... Without mouse focus.</li>
<li>highlighted ... With mouse focus.</li>
<li>mousedowned ... With mouse focus and mouse left-button pressed.</li>
<li>sub-menu opened ... For a sub-menu item with sub-menu opened.</li>
<li>on-path ... When page path is called to display.</li>
</ul>
<p>If the style for a stage is not needed, it can be left blank (keep the comma to indicate it's blank). If some groups are not present, say only three groups are defined, then "sub-menu opened" and "on-path" will not have special style effects.</p>
</td>
</tr>
</table>
</td></tr></table><br clear="all">

<br><li>Define an icon style:</li>
<pre>
addStyleIcon("icon-style-name", "icon-style-phrase");
</pre>
<p>The following phrases are available:</p>
<table cellspacing="1" cellpadding="0" bgcolor="#666666"><tr bgcolor="#ffffff"><td>
<table cellspacing="1" cellpadding="6" bgcolor="#ffffff">
<tr valign="top" bgcolor="#cccccc"><td nowrap>Name</td><td>Value</td></tr>

<tr valign="top" bgcolor="#f0f0f0">
<td nowrap>css</td>
<td>
<p>up to five groups of CSS classes separated by comma, specifying the icon styles for menu item on following stages:</p>
<ul>
<li>normal ... Without mouse focus.</li>
<li>highlighted ... With mouse focus.</li>
<li>mousedowned ... With mouse focus and mouse left-button pressed.</li>
<li>sub-menu opened ... For a sub-menu item with sub-menu opened.</li>
<li>on-path ... When page path is called to display.</li>
</ul>
<p>If the style for a stage is not needed, it can be left blank (keep the comma to indicate it's blank). If some groups are not present, say only three groups are defined, then "sub-menu opened" and "on-path" will not have special style effects.</p>
</td>
</tr>

<tr valign="top" bgcolor="#f0f0ff">
<td nowrap>text</td>
<td><p>if present, defines in following format the text characters used as the icon, for example:</p>
<p class="note">