Menu class

• -1 {number}, specifies that the item's caption full-fits the item's background. You can use the or ex-HTML tags to align portions of caption inside the item
• 0 {number}, indicates that the caption is left-aligned
• +1 {number}, specifies that the caption is centered
• +2 {number}, specifies that the caption is right-aligned

• exLeftAlign (0x00), positions the shortcut menu so that its left side is aligned with the coordinate specified by the x parameter
• exCenterAlign (0x04), centers the shortcut menu horizontally relative to the coordinate specified by the x parameter
• exRightAlign (0x08), positions the shortcut menu so that its right side is aligned with the coordinate specified by the x parameter
• exTopAlign (0x00), positions the shortcut menu so that its top side is aligned with the coordinate specified by the y parameter
• exVCenterAlign (0x10), centers the shortcut menu vertically relative to the coordinate specified by the y parameter
• exBottomAlign (0x20), positions the shortcut menu so that its bottom side is aligned with the coordinate specified by the y parameter

• exArrangeItemsHorizontal (1), specifies that the items are horizontally arranged from left to right
• exArrangeItemsVertical (2), specifies that the items are vertically arranged from top to bottom
• exArrangeItemsHideTopArrow (0x10), indicates that the arrow for any top-item is not visible (not valid for float-menu)
• exArrangeItemsPopupAlign (0x20), specifies that the item's float/popup-menu should be displayed to prevent overlapping other items
• exArrangeItemsWrap (0x100), wraps items on a new row/column (not valid for float-menu)
• exArrangeItemsScroll (0x200), specifies that the control's scroll bar is displayed if required
• exArrangeItemsAlignCenter (0x400), centers the items on each row/column
• exArrangeItemsAlignReverse (0x800), reverses the alignment of the items

• array of [x,y,width,height] type that specifies the control's client area
• string, that specifies the identifier of the canvas within the document, so the canvas's client area becomes the control's client area
• HTMLCanvasElement, that specifies the identifier of the canvas within the document, so the canvas's client area becomes the control's client area

• if positive, indicates the time in ms the sub-menu is closed once the cursor hovers the top-level item.
• if 0, indicates that the sub-menu is closed as soon as the cursor hovers a top-level item
• if negative, it has no effect

• exCloseOnDefault (0), indicates that the float-menu is closed once the user clicks an enabled item with no check, radio or button associated
• exCloseOnDisabled (1), specifies that the float-menu is closed once the user clicks a disabled item
• exCloseOnSeparator (2), specifies that the float-menu is closed once the user clicks a separator item
• exCloseOnButton (4), specifies that the float-menu is closed once the user clicks an item of button-type
• exCloseOnCheck (8), specifies that the float-menu is closed once the user clicks an item of check-type
• exCloseOnRadio (16), specifies that the float-menu is closed once the user clicks an item of radio-type
• exCloseOnState (24), specifies that the float-menu is closed once the user clicks an item of check or radio-type
• exCloseOnAny (-1), specifies that the float-menu is closed once the user clicks any type of item anywhere

• exNormal (0), indicates that the menu's flat bar is not shown
• exShowFlat (1), indicates that the menu's flat bar is visible only if the menu contains items with check, radio or image
• exAlwaysFlat (2), indicates that the menu's flat bar is always visible

"cursor(part),cursor(part),..."

• "cursor", defines the CSS mouse cursor to display while cursor hovers the part
• "part", defines the name of the part the cursor is applied on (as defined below)

• "menu" (menu), defines the mouse-cursor to show when the mouse pointer hovers the entire menu
• "flat" (flat), defines the mouse-cursor to show when the mouse pointer hovers menu's flat bar (usually shown in the left side of the menu)
• "sep" (separator), defines the mouse-cursor to show when the mouse pointer hovers the separator-items
• "item" (item), defines the mouse-cursor to show when the mouse pointer hovers the item's background. It covers all parts of the item as check, image, caption/button, popup arrow and sub-items
• "sub" (sub-items), defines the mouse-cursor to show when the mouse pointer hovers the sub-items of the item (while the item is grouped)
• "arr" (arrow), defines the mouse-cursor to show when the mouse pointer hovers the item's arrow (while the item contains un-grouped sub-items)
• "cap" (caption), defines the mouse-cursor to show when the mouse pointer hovers the item's caption
• "img" (image), defines the mouse-cursor to show when the mouse pointer hovers the item's image
• "chk" (check), defines the mouse-cursor to show when the mouse pointer hovers the item's check-box
• "rad" (radio), defines the mouse-cursor to show when the mouse pointer hovers the item's radio-button
• "btn" (button), defines the mouse-cursor to show when the mouse pointer hovers the buttons
• "rarr" (right-arrow), defines the mouse-cursor to show when the mouse pointer hovers the button's arrow (to right)
• "barr" (bottom-arrow), defines the mouse-cursor to show when the mouse pointer hovers the button's arrow (to bottom)
• "anchor" (hyperlink), defines the mouse-cursor when the mouse pointer hovers the anchor (the <a id;options> ex-HTML part marks an anchor or hyperlink element) (@since 2.2)

"item1[flag=value]...[flag=value](sub-item1[flag=value]...[flag=value],...,sub-itemn[flag=value]...[flag=value]),...,itemn[flag=value]...[flag=value](sub-item1[flag=value]...[flag=value],...,sub-itemn[flag=value]...[flag=value])"

• [id], specifies the item's identifier, such as [id=10].
• [align] {number}, horizontally aligns the caption. The align could be -1(full-fits the item), 0(left-alignment), 1(center), or 2( right-alignment) such as [align=2] right-aligns the item.
• [pad], specifies the item's padding (space between the menu border and the item content). The pad could be one or two numbers, separated by comma, such as [pad=2] or [pad=2,2]
• [itemsPad], specifies the items padding (space between the menu border and the item content). The itemsPad could be one or two numbers, separated by comma, such as [itemsPad=2] or [itemsPad=2,2]
• [chk], indicates that the item has a check-box associated. If the [typ] flag is present, the [chk] flag indicates the state of the item, and the [rad] flag is ignored. The chk could be 0 or 1, such as [chk] or [chk=0] for a un-checked item, or [chk=1] for checked item.
• [rad], indicates that the item has a radio-button associated. If the [typ] flag is present, the [chk] flag indicates the state of the item, and the [rad] flag is ignored. The rad could be 0 or 1, such as [rad] or [rad=0] for a un-checked item, or [rad=1] for checked item.
• [typ], specifies the type of the item, that can be normal, check or radio. The typ could be 0(normal item), 1(items that display a check/box (chk)) or 2(items that display radio buttons (rad)). If the [typ] flag is present, the [chk] flag indicates the state of the item, and the [rad] flag is ignored. For instance [typ=1], specifies a check-box item
• [grp], defines the radio group. It should be used when you define more groups of radio buttons. A group of radio buttons means that only one item could be checked at one time. The rad option specifies that the item displays a radio button. Use the grp option to define the group of radio where this button should be associated, If no group of radio buttons is required, the grp could be ignored. For instance, [grp=sample]
• [img], indicates that the item's image. The img indicates the name of an exontrol.HP, such as [img=logo]
• [group], specifies how the sub-items are being grouped. The group could be a flag combination of Menu.GroupPopupEnum type, such as [group] to group horizontlly the item, or [group=0x100] to group vertically the items
• [arrow], indicates whether the item's popup-arrow is shown or hidden. The arrow could be 0 to hide the arrow, or not-zero to show the arrow, such as [arrow] or [arrow=0] to hide the arrow, or [arrow=1] to show the arrow
• [hid], hides/shows the item. The hid could be 0 which indicates that the item is hidden. Any other value makes the item visible, such as [hid] or [hid=0] to hide the item, or [hid=1] to show the item
• [captionWidth] or [cw], specifies the width to show the HTML caption of the item, where value could be a integer expression. A negative value indicates that no limitation is applied to the item's caption, so no truncate caption is shown. For instance [cw=128]
• [captionHeight] or [ch], specifies the height to show the HTML caption of the item, where value could be a integer expression. A negative value indicates that no limitation is applied to the item's caption, so no truncate caption is shown. For instance [ch=128]
• [height], specifies the height to display the item, where value could be a integer expression (it applies to all parts of the item). For instance [height=64]
• [width], specifies the width to display the item, where value could be a integer expression (it applies to all parts of the item). For instance [width=64]
• [button], associates a button with the item. The value could be a flag combination of Menu.ShowAsButtonEnum type, such as [button] or [button=1] makes the item to display a button, or [button=0] disables displaying any button.
• [spchk], indicates whether the sub-items/popup of giving item are shown when the item is checked. The value could be 0, which indicates that it has no effect, or non-zero to show the sub-item when the item is checked. For instance [spchk]
• [show], specifies how an item that has a check-box/radio-button should be displayed. The value could be any value of Menu.ShowCheckedAsSelectedEnum type. For instance [show=-1] (the exDisplayItemCheckHighlight value highlights the checked item)
• [showdis], makes the item to show as disabled, while it is still enabled. The flag is applied to all descendents. Any value not-zero indicates that the item is shown as disabled. For instance [showdis]
• [tab], indicates the identifier of the item that displays the sub-items of the current item. For instance: [tab=page] or [tab=1]
• [dis], disables the item. The flag is applied to all descendents. Any value not-zero indicates that the item is enabled. For instance [dis]
• [sep], specifies an separator item, such as [sep]. The value is ignored if provided. For instance [sep]
• [popupalign] or [pa], indicates how the sub-menu/popup/float is aligned relative to the parent item (Menu.ShowPopupAlignEnum). For instance [pa=1] (The exShowPopupAlignDown value indicates that the sub-menu/popup is shown down-aligned relative to the parent item)
• [shapes], specifies the shapes to be applied on the item only. For instance [shapes=dfitem(item),dfcap(cap)]
• [cursors], defines the mouse cursor to be displayed when pointing over a part of the item only. For instance [cursors=pointer(item)]
• [close], specifies whether clicking the item closes the float-menu (Menu.CloseOnClickEnum). For instance [close=-1], closes the context-menu once the user clicks the items (no matter, if it is of check, radio or button type)

• if positive, indicates the time in ms the top-level item opens its sub-menu once the cursor hovers it.
• if 0, indicates that the top-level item opens its sub-menu as soon as cursor hovers it
• if negative, indicates that the item requires click to to open its sub-menu

• if positive, specifies the time in ms the control closes all its float-menu as soon as the cursor hovers outside portion of the menu
• if 0, indicates that the menu's floats are closed as soon as the cursor hovers outside portion of it
• if negative, it has no effect

"shape(part),shape(part),..."

• "shape", defines the shape to apply on the UI part as one of the following:

  ◦ any of 140 color names any browser supports (such as red, blue, green, ...)
  ◦ hexadecimal colors, is specified with: #RRGGBB, where the RR (red), GG (green) and BB (blue) hexadecimal integers specify the components of the color. All values must be between 00 and FF (such as #0000ff which defines a blue background)
  ◦ hexadecimal colors with transparency, is specified with: #RRGGBBAA, where AA (alpha) value must be between 00 and FF (such as #0000ff80 which defines a semi-transparent blue background)
  ◦ RGB colors, is specified with the RGB(red, green, blue) function. Each parameter (red, green, and blue) defines the intensity of the color and can be an integer between 0 and 255( such as rgb(0,0,255) that defines a blue background)
  ◦ RGBA colors, are an extension of RGB color values with an alpha channel as RGBA(red, green, blue, alpha) function, where the alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque) ( such as rgba(0,0,255,0.5) which defines a semi-transparent blue background)
  ◦ HSL colors, is specified with the HSL(hue, saturation, lightness) function, where hue is a degree on the color wheel (from 0 to 360) - 0 (or 360) is red, 120 is green, 240 is blue. saturation is a percentage value; 0% means a shade of gray and 100% is the full color. lightness is also a percentage; 0% is black, 100% is white. HSL stands for hue, saturation, and lightness - and represents a cylindrical-coordinate representation of colors (such as hsl(240, 100%, 50%) that defines a blue background)
  ◦ HSLA colors, are an extension of HSL color values with an alpha channel - which specifies the opacity of the object as HSLA(hue, saturation, lightness, alpha) function, where alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque) (such as hsla(240, 100%, 50%,0.5) that defines a semi-transparent blue background)
  ◦ a JSON representation of the shape object to apply (while it starts with { character, such as '{"normal": {"primitive": "RoundRect","fillColor":"black","tfi": {"fgColor": "white"}}}')
  ◦ specifies the name of the field within the exontrol.Shapes.Menu object (while it starts with a lowercase letter, such as dfitem which refers to exontrol.Shapes.Menu.dfitem shape)
  ◦ specifies the name of the field within the exontrol.Shapes object (while it starts with an uppercase letter, such as Button which refers to exontrol.Shapes.Button shape)
  

• "part", defines the name of the part the shape is applied on (as defined bellow)

• "menu" (menu), defines the visual appearance for the entire menu
• "flat" (flat), defines the visual appearance for menu's flat bar (usually shown in the left side of the menu)
• "sep" (separator), defines the visual appearance to display separator-items
• "item" (item), defines the visual appearance for the item's background. It covers all parts of the item as check, image, caption/button, popup arrow and sub-items
• "sub" (sub-items), defines the visual appearance to display sub-items of the item (while the item is grouped)
• "arr" (arrow), defines the visual appearance to display item's arrow (while the item contains un-grouped sub-items)
• "cap" (caption), defines the visual appearance for the item's caption
• "img" (image), defines the visual appearance to display the item's image
• "chk" (check), defines the visual appearance to display the item's check-box
• "rad" (radio), defines the visual appearance to display the item's radio-button
• "btn" (button), defines the visual appearance to display the buttons
• "rarr" (right-arrow), defines the visual appearance to display button's arrow (to right)
• "barr" (bottom-arrow), defines the visual appearance to display button's arrow (to bottom)

• exDisplayItemCheckDefault (0), indicates that no highlight is applied to the item's check/radio
• exDisplayItemCheckHighlight (-1), highlights the checked item
• exDisplayItemHighlight (1), highlights the checked item, but hides the item's check/radio button

• exArrangeItemsHorizontal (1), specifies that the items are horizontally arranged from left to right
• exArrangeItemsVertical (2), specifies that the items are vertically arranged from top to bottom
• exArrangeItemsHideTopArrow (0x10), indicates that the arrow for any top-item is not visible (not valid for float-menu)
• exArrangeItemsPopupAlign (0x20), specifies that the item's float/popup-menu should be displayed to prevent overlapping other items
• exArrangeItemsWrap (0x100), wraps items on a new row/column (not valid for float-menu)
• exArrangeItemsScroll (0x200), specifies that the control's scroll bar is displayed if required
• exArrangeItemsAlignCenter (0x400), centers the items on each row/column
• exArrangeItemsAlignReverse (0x800), reverses the alignment of the items

• if positive, indicates the time in ms the sub-menu is closed once the cursor hovers the second-level item
• if 0, indicates that the sub-menu is closed as soon as the cursor hovers a second-level item
• if negative, it has no effect

• if positive, indicates the time in ms the item opens its sub-menu once the cursor hovers it.
• if 0, indicates that the item opens its sub-menu as soon as the cursor hovers it
• if negative, it has no effect so the item requires click in order to open its sub-menu

The value as {string} supports any of the following keywords (each keyword can be specified using first letters only such as "b" for "bold) separated by space characters:

• bold, displays the text in bold (equivalent of <b> tag)
• italic, displays the text in italics (equivalent of <i> tag)
• underline, underlines the text (equivalent of <u> tag)
• strikeout, specifies whether the text is strike-through (equivalent of <s> tag)
• <fontName name>, specifies the font's family (equivalent of <font name> tag)
• <fontSize size>, specifies the size of the font (equivalent of <font ;size> tag)
• <fgColor CSSColor>, specifies the text's foreground color (equivalent of <fgcolor> tag)
• <bgColor CSSColor>, specifies the text's background color (equivalent of <bgcolor> tag)
• <shaColor CSSColor;width;offset>, defines the text's shadow (equivalent of <sha color;width;offset> tag)
• <outColor CSSColor>, shows the text with outlined characters (CSScolor) (equivalent of <out color> tag)
• <graColor CSSColor;mode;blend>, defines a gradient text (equivalent of <gra color;mode;blend> tag)

Any other word within the string value that's not recognized as a keyword is interpreted as:

• name of the font (not a number), specifies the font's family (equivalent of <font name> tag)
• size of the font (number), specifies the size of the font (equivalent of <font ;size> tag)

The value as {object} supports any of the following fields:

• bold {boolean}, displays the text in bold (equivalent of <b> tag)
• italic {boolean}, displays the text in italics (equivalent of <i> tag)
• underline {boolean}, underlines the text (equivalent of <u> tag)
• strikeout {boolean}, specifies whether the text is strike-through (equivalent of <s> tag)
• fontName {string}, specifies the font's family (equivalent of <font name> tag)
• fontSize {number}, specifies the size of the font (equivalent of <font ;size> tag)
• fgColor {string}, specifies the text's foreground color (CSScolor) (equivalent of <fgcolor> tag)
• bgColor {string}, specifies the text's background color (CSScolor) (equivalent of <bgcolor> tag)
• shaColor {object}, specifies an object of {color, width, offset} type that defines the text's shadow (equivalent of <sha color;width;offset> tag), where:
  • color {string}, defines the color of the text's shadow (CSScolor)
  • width {number}, defines the size of the text's shadow
  • offset {number}, defines the offset to show the text's shadow relative to the text
• outColor {string}, shows the text with outlined characters (CSScolor) (equivalent of <out color> tag)
• graColor {object}, specifies an object of {color, mode, blend} type that defines a gradient text (equivalent of <gra color;mode;blend> tag), where:
  • color {string}, defines the gradient-color (CSScolor)
  • mode {number}, defines the gradient mode as a value between 0 and 4
  • blend {number}, defines the gradient blend as a value between 0 and 1

CSSColor or CSS legal color values can be specified by the following methods:

• Hexadecimal colors, is specified with: #RRGGBB, where the RR (red), GG (green) and BB (blue) hexadecimal integers specify the components of the color. All values must be between 00 and FF. For example, #0000ff value is rendered as blue, because the blue component is set to its highest value (ff) and the others are set to 00.
• Hexadecimal colors with transparency, is specified with: #RRGGBBAA, where AA (alpha) value must be between 00 and FF. For example, #0000ff80 defines a semi-transparent blue.
• RGB colors, is specified with the RGB(red, green, blue) function. Each parameter (red, green, and blue) defines the intensity of the color and can be an integer between 0 and 255. For example, rgb(0,0,255) defines the blue color.
• RGBA colors, are an extension of RGB color values with an alpha channel as RGBA(red, green, blue, alpha) function, where the alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque). For example, rgba(0,0,255,0.5) defines a semi-transparent blue.
• HSL colors, is specified with the HSL(hue, saturation, lightness) function, where hue is a degree on the color wheel (from 0 to 360) - 0 (or 360) is red, 120 is green, 240 is blue. saturation is a percentage value; 0% means a shade of gray and 100% is the full color. lightness is also a percentage; 0% is black, 100% is white. HSL stands for hue, saturation, and lightness - and represents a cylindrical-coordinate representation of colors. For example, hsl(240, 100%, 50%) defines the blue color.
• HSLA colors, are an extension of HSL color values with an alpha channel - which specifies the opacity of the object as HSLA(hue, saturation, lightness, alpha) function, where alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque). For example, hsla(240, 100%, 50%,0.5) defines a semi-transparent blue.
• Predefined/Cross-browser color names, 140 color names are predefined in the HTML and CSS color specification. For example, blue defines the blue color.

oItem {Item}, specifies the item of Item type

• array of [x,y,width,height] type that specifies the control's client area
• string, that specifies the identifier of the canvas within the document, so the canvas's client area becomes the control's client area
• HTMLCanvasElement, that specifies the identifier of the canvas within the document, so the canvas's client area becomes the control's client area
• null, indicates that the menu is displayed as a context/shortcut-menu at position (x,y) (of options). Use Open() method to open the shortcut/context-menu any time

Properties