The description of the properties will soon be completed. The following style properties may be placed:
with(itemStyle=new fxstyle()){
here
} |
Please note: The syntax for style properties and menu properties slightly differs from the syntax for item properties (the quotes!).
Menu items have three different states: when mouse pointer is out of the item ("mouseout"), over the item ("mouseover") or the item gets clicked ("mousedown"). Usually you have for each state a complete set of properties; for example: textdown, imagedown, bgcolordown, colordown, ... allowing you to give each item an individual style depending on the active state.
|
| Property | Description | Example |
| paddingleft | | paddingleft=12; |
| paddingtop | | paddingleft=2; |
| align | | align="right"; |
| fontfamily | | fontfamily="Arial,Verdana,Helvetica"; |
| fontsize | When defining "fontsize" you can add the following units: pt or px. Other units are not supported. Units such as: "em" or "%" have quirks. If "fontsize" is not declared, property is inherited by the settings either for body or a tag. (In Netscape 4 default fontsize is 8pt.) If you are using (strict) doctype definitions, don't forget to add a unit to "fontsize". | fontsize="9pt";
fontsize=9 |
| fontsizeon | When defining "fontsizeon" you can add the following units: pt or px. Other units are not supported. Not available in Netscape 4. | fontsizeon="9pt"; |
| fontweight | Valid values are normal or bold. | fontweight="normal"; |
| fontweighton | Valid values are normal or bold. | fontweighton="bold"; |
| fontweightdown | Valid values are normal or bold. | fontweightdown="bold"; |
| fontstyle | Valid value is italic. | fontstyle="italic"; |
| decoration | You can use here none or underline. | decoration="none"; |
| decorationon | You can use here none or underline. | decorationon="underline"; |
| decorationdown | You can use here none or underline. | decoration="underline"; |
| color | HEX values or valid HTML colornames can be used here. | color="#808080"; |
| coloron | HEX values or valid HTML colornames can be used here. | coloron="#000000"; |
| colordown | HEX values or valid HTML colornames can be used here. | colordown="#003366"; |
| colormatch | Requires: "match". HEX values or valid HTML colornames can be used here. | colormatch="#993300"; |
| bgcolor | HEX values or valid HTML colornames can be used here. | bgcolor="#FFFFFF"; |
| bgcoloron | HEX values or valid HTML colornames can be used here. | bgcoloron="#D2DEFF"; |
| bgcolordown | HEX values or valid HTML colornames can be used here. | bgcoloron="#3366CC"; |
| bgcolormatch | Requires: "match". HEX values or valid HTML colornames can be used here. | bgcolormatch="#003399"; |
| bordercolor | HEX values or valid HTML colornames can be used here. | bordercolor="#000000"; |
| bordercoloron | HEX values or valid HTML colornames can be used here. | bordercoloron="#3300CC"; |
| bordercolordown | HEX values or valid HTML colornames can be used here. | bordercolordown="#FFFFFF"; |
| borderlowcolor | HEX values or valid HTML colornames can be used here. | borderlowcolor="#808080"; |
| borderhighcolor | HEX values or valid HTML colornames can be used here. | borderhightcolor="#FFFFFF"; |
| bordercolormatch | Requires: "match". HEX values or valid HTML colornames can be used here. | bordercolormatch="#990033"; |
| borderwidth | | borderwidth=1; |
| borderstyle | All valid CSS 1 and CSS 2 values can be set for "borderstyle". | borderstyle="solid"; |
| borderstyleon | All valid CSS 1 and CSS 2 values can be set for "borderstyleon". | borderstyleon="outset"; |
| borderstyledown | All valid CSS 1 and CSS 2 values can be set for "borderstyledown". | borderstyledown="outset"; |
| borderwidthmatch | Requires: "match". | borderwidthmatch=2; |
| bgimage | | bgimage="mybgimage.gif"; |
| bgimageon | (Not supported in IE for Mac.) | bgimageon="mybgimageon.gif"; |
| bgimagedown | (Not supported in IE for Mac.) | bgimagedown="mybgimagedown.gif"; |
| arrow | Enter image path. The image gets visible, if the item has a submenu. Important: Path has to be relative to the HTML-page, where the menu will be displayed and not relative to the js-file! | arrow="subimg.gif"; |
| arrowon | | arrowon="subimgon.gif"; |
| arrowdown | | arrowdown="subimgdown.gif"; |
| arrowright | | arrowright=25; |
| arrowtop | | arrowtop=1; |
| icon | | icon="iconhome.gif"; |
| iconon | | iconon="iconhomeon.gif"; |
| icondown | | icondown="iconhomedown.gif"; |
| iconmatch | Requires: "match". | iconmatch="iconhomematch.gif"; |
| iconwidth | | iconwidth=22; |
| iconleft | | iconleft=5; |
| icontop | | icontop=1; |
| left | "Left" is used to force independet item positioning within the menu. The items are no longer positioned relative but absolute to the left corner of the menu. This feature is difficult to use and is not mandatory or explicit recommended. | left=5; |
| top | "Top" is used to force independet item positioning within the menu. The items are no longer positioned relative but absolute to the top corner of the menu. This feature is difficult to use and is not mandatory or explicit recommended. | top=50; |
| width | Sets the width of the item. This is mandatory | width=190; |
| height | Sets the height of the item. This is mandatory | height=30; |
| imagematch | Requires: "match". | imagematch="guitarmatch.jpg"; |
| urldelay | Delay to show an "down" style of an item, before you are forwarded to the "url". Attention: A defined JavaScript function in "url" will be executed with a delay too. Unit is milliseconds. | urldelay=1000; |
| target | "Target" can be used to open new browser windows or to link to frames. If "target" isn't set, the url opens in the same window. If the "target" is set, but the frame is not available the url opens in a new window. For iframes use the property "iframe". | target="myframe";
target="blank";
target="parent";
target="top"; |
| iframe | Use "iframe" instead of target, if you want to open a new page in an iframe. If the declared iframe is not available, the url opens in a new window. | iframe="myiframe"; |
| match | Match with url, allows you to add specific styles to an item. "Match" is used to show visitors the currently active web page in your web project. | match="url"; |
| cursor | Displays a different cursor on "mouseover" event in all DOM-compliant browsers(MSIE 5+, NETSCAPE 6+, OPERA 7+, ...). Valid values are: default, auto, crosshair, pointer, move, text, help and wait. Internet users expect a certain behaviour when they see a cursor, therefore you should choose the "cursor" carefully. For example when they see a move cursor, visitors expect the menu to be dragable.
| cursor="pointer"; |
| cursormatch | Requires: "match". | cursormatch="text" |
| type | Usually an item is overlapped by a layer to create a clickable area. With "type=form" you can remove the overlapping layer to display form elements like select boxes or textareas. "Type=header" can be used to convert the item into a static headline or to define several links to different locations in one item. | type="form";
type="header"; |
| functionover | Allows you to define any JavaScript function. Works like an interface between the FX code and your own functions. Fired on "mouseover" event, when you move your mouse over an item. | functionover="myfunction()"; |
| functionout | Allows you to define any JavaScript function. Fired on "mouseout" event. | functionout="myfunction()"; |
| functiondown | Allows you to define any JavaScript function. Fired on "click" event. | functiondown="myfunctiondown()"; |
