Table of Contents
  • Getting Started
  • EO.Pdf
  • EO.Web
    • Overview
    • Installation & Deployement
    • EO.Web ToolTip
    • EO.Web Rating
    • EO.Web Slider & RangeSlider
    • EO.Web ListBox
    • EO.Web ComboBox
    • EO.Web Captcha
    • EO.Web ASPX To PDF
    • EO.Web Slide
    • EO.Web Flyout
    • EO.Web EditableLabel
    • EO.Web ImageZoom
    • EO.Web Floater
    • EO.Web Downloader
    • EO.Web ColorPicker
    • EO.Web HTML Editor
    • EO.Web File Explorer
    • EO.Web SpellChecker
    • EO.Web Grid
    • EO.Web MaskedEdit
    • EO.Web Splitter
    • EO.Web Menu
    • EO.Web Slide Menu
    • EO.Web TabStrip
    • EO.Web TreeView
    • EO.Web Calendar
    • EO.Web Callback
    • EO.Web MultiPage
    • EO.Web Dialog
    • EO.Web AJAXUploader
    • EO.Web ProgressBar - Free!
    • EO.Web ToolBar - Free!
  • EO.WebBrowser
  • EO.Wpf
  • Common Topics
  • Reference
How Phthalo_Green skin (SlideMenu) is created
This following table lists properties used by the built-in Phthalo_Green slide menu skin.
Property Value Remarks
The following properties apply to the SlideMenu.
SlidePaneHeight 120 Specifies the height of the sliding pane. If you have more items in each pane, increase this value accordingly.
Width 120 The width of the menu.

The following properties apply on the _TopGroup look. The _TopGroup look is used to control the appearance of the top menu group's border, background, font, etc.

  • To access the _TopGroup look item in code, use Menu.ItemLooks.TopGroup
  • To modify the _TopGroup look with Menu Builder, start Menu Builder, select the _TopGroup look item, then edit its properties in the property grid;
SubMenu.CssText cursor: hand;
font-size: 8pt;
color: #003000;
font-family: verdana;
border-top-style: none;
border-right-style: none;
border-left-style: none;
border-bottom-style: none
Specifies font and cursor for all top level items. No border, no background color.
SubMenu.ItemSpacing 1 1 pixel between items.

The following properties apply on the _TopLevelItem look. The _TopLevelItem look is automatically applied to all top level items which LookID is the default value Auto.

  • To access the _TopLevelItem look item in code, use Menu.ItemLooks.TopLevelItem
  • To modify the _TopLevelItem look with Menu Builder, start Menu Builder, select the _TopLevelItem look item, then edit its properties in the property grid;

For a slide menu, the top level items are the parent item of each sliding pane.

NormalStyle.CssText color: #003000;
padding-left: 3px;
padding-right: 5px;
padding-bottom: 2px;
padding-top: 2px;
border-right: #9c9a9c 1px solid;
border-top: #9c9a9c 1px solid;
border-left: #9c9a9c 1px solid;
border-bottom: #9c9a9c 1px solid;
background-color: #efefef
Specifies the color, padding, and border when navigation item is in Normal state.
HoverStyle.CssText color: #9c6500;
padding-left: 3px;
padding-right: 5px;
padding-top: 2px;
padding-bottom: 2px;
border-right: #9c9a9c 1px solid;
border-top: #9c9a9c 1px solid;
border-left: #9c9a9c 1px solid;
border-bottom: #9c9a9c 1px solid;
background-color: #efefef
Specifies the color, padding, and border when navigation item is in Hover state. Note the text color is different.
SelectedStyle.CssText padding-left: 3px;
padding-right: 5px;
padding-top: 2px;
padding-bottom: 2px;
border-left: #003000 1px solid;
border-right: #003000 1px solid;
border-top: #003000 1px solid;
border-bottom: #003000 1px solid;
color: white;
background-color: #316531
Specifies the color, padding, and border when navigation item is in Selected state. For a slide menu, the parent navigation item switches to Selected state when the slide pane expands.
SubMenu.Style.CssText padding-left: 2px;
padding-right: 2px;
padding-bottom: 2px;
padding-top: 2px;
cursor: hand;
color: #003000;
font-size: 8pt;
font-family: verdana;
border-top: #9c9a9c 1px solid;
border-bottom: #9c9a9c 1px solid;
border-left: #9c9a9c 1px solid;
border-right: #9c9a9c 1px solid;
background-color: transparent
Specifies the sliding pane's padding, font, color background color and border.
SubMenu.LeftIconCellWidth 2 Reserves some space on the left side of each navigation item.
SubMenu.ItemSpacing 1 1 pixel between each navigation item in the sliding pane.

The following properties apply to the _Default look. The _Default look is automatically applied to all sub menu items which LookID is the default value Auto.

  • To access the _Default look item in code, use Menu.ItemLooks.Default
  • To modify the _Default look with Menu Builder, start Menu Builder, select the _Default look item, then edit its properties in the property grid;
NormalStyle.CssText color:#003000; Specifies the text color when navigation item is in Normal state.
HoverStyle.CssText color:#9C6500; Specifies the text color when navigation item is in Hover state.
SubMenu.Style.CssText padding-left: 2px;
padding-right: 2px;
padding-top: 2px;
padding-bottom: 2px;
border-left: #9c9a9c 1px solid;
border-right: #9c9a9c 1px solid;
border-top: #9c9a9c 1px solid;
border-bottom: #9c9a9c 1px solid;
font-size: 8pt;
color: #003000;
font-family: verdana;
background-color: transparent
cursor: hand;
Items in the sliding pane can still have sub menus. These sub menus will be displayed as regular popup menus when activated. Here we specify the styles for those sub menus.
SubMenu.ShadowDepth 0 No shadow for the popup sub menus.
SubMenu.ItemSpacing 1 1 pixel between each navigation item in the popup sub menus.
SubMenu.OffsetX 2 By default, sub menu aligns to the right edge of the item, not the menu group box. Here we use OffsetX to align it to the item group box.