Menu Elements
- 3 minutes to read
Topics in this section describes the visual elements of menu controls from the ASPxMenu Suite. Each topic contains a screenshot and a brief overview of the element’s function.
Root Item
The Root Item represents the menu item displayed at the top level.
The table below lists the main members that affect the element’s appearance and functionality.
| Characteristics | Members |
|---|---|
| Style | ASPxMenuBase.ItemStyle, ASPxMenuBase.LinkStyle |
| Paddings | ASPxMenuBase.Paddings |
| Spacings | ASPxMenuBase.ItemSpacing |
| Image | ASPxMenuBase.ItemImage |
| Settings | ASPxMenu.ItemAutoWidth, ASPxMenuBase.RootItem, MenuItemStyleBase.Width |
| Template | ASPxMenuBase.RootItemTemplate, ASPxMenuBase.RootItemTextTemplate |
| Selection | ASPxMenuBase.SelectParentItem |
| Gutter[1] | ASPxMenuBase.GutterCssClass, ASPxMenuBase.GutterBackgroundImage, ASPxMenuBase.GutterWidth |
Subitem
Subitem represents a menu item which has a parent menu item.
The table below lists the main members which affect the element’s appearance and functionality:
| Characteristics | Members |
|---|---|
| Style | ASPxMenuBase.SubMenuItemStyle, ASPxMenuBase.SubMenuStyle, MenuItem.SubMenuStyle |
| Position | ASPxMenuBase.RootItemSubMenuOffset, ASPxMenuBase.ItemSubMenuOffset |
| Image | ASPxMenuBase.SubMenuItemImage |
| Gutter | MenuStyle.GutterCssClass, MenuStyle.GutterBackgroundImage, MenuStyle.GutterWidth |
Item Image
An Item Image represents an image that is displayed within a menu item.
The table below lists the main members that affect element appearance and functionality.
| Characteristics | Members |
|---|---|
| Settings | ASPxMenuBase.ItemImage, MenuItem.Image, MenuItem.SubMenuItemImage, ASPxMenuBase.SubMenuItemImage |
| Position (for root items only) | ASPxMenu.ItemImagePosition |
| Image Spacing | MenuItemStyle.ImageSpacing |
Pop-Out Image
Pop-Out Image represents an image that is displayed in a menu item and indicates that this item has a submenu.
The table below lists the main members which affect the element’s appearance and functionality:
| Characteristics | Members |
|---|---|
| Visibility | ASPxMenuBase.ShowPopOutImages |
| Image Settings | ASPxMenuBase.VerticalPopOutImage, ASPxMenuBase.HorizontalPopOutImage |
Gutter
A gutter is the spacing within a menu item. A root menu gutter is the gutter displayed at the top level. The root menu gutter is displayed if the menu is vertically oriented (the ASPxMenu.Orientation property is set to Vertical).
Note that the gutter width does not affect the position of an item image or text. Use the TextIndent property to control the text indent of an item that has no image. To control the amount of space between an image and the text content within a menu item, use the ImageSpacing property.
The table below lists the main members that affect element appearance and functionality.
| Characteristics | Root Menu Members | Sub Menu Members |
|---|---|---|
| Gutter Background Image | ASPxMenuBase.GutterBackgroundImage | MenuStyle.GutterBackgroundImage |
| Gutter Width | ASPxMenuBase.GutterWidth | MenuStyle.GutterWidth |
| Gutter CSS Class | ASPxMenuBase.GutterCssClass | MenuStyle.GutterCssClass |
| Image Spacing | AppearanceStyle.ImageSpacing (via ASPxMenuBase.ItemStyle.ImageSpacing) | via ASPxMenuBase.SubMenuItemStyle.ImageSpacing) |
| Text Indent | ASPxMenuBase.TextIndent | MenuStyle.TextIndent |
Separator
Separator represents the horizontal or vertical line between menu items.
The table below lists the main members which affect the element’s appearance and functionality:
| Characteristics | Members |
|---|---|
| Visibility | ASPxMenuBase.AutoSeparators |
| Color | ASPxMenuBase.SeparatorColor |
| Image | ASPxMenuBase.SeparatorBackgroundImage |
| Height | ASPxMenuBase.SeparatorHeight |
| Width | ASPxMenuBase.SeparatorWidth |
| Paddings | ASPxMenuBase.SeparatorPaddings |
Loading Panel
Loading Panel displays a custom ‘Loading…’ text and image. It notifies users that a callback is currently processing.
The table below lists the main members which affect the element’s appearance and functionality:
| Characteristic | Members |
|---|---|
| Delay | SettingsLoadingPanel.Delay |
| Visibility | SettingsLoadingPanel.Enabled |
| Text | SettingsLoadingPanel.Text |
| Image | SettingsLoadingPanel.ShowImage, SettingsLoadingPanel.ImagePosition, ASPxMenuBase.LoadingPanelImage |
| Style | ASPxMenuBase.LoadingPanelStyle |
Drop-Down Button
Drop-Down Button represents a button that is located within a menu item and indicates that this item has a submenu.
The table below lists the main members which affect the element’s appearance and functionality:
| Characteristics | Members |
|---|---|
| Visibility | MenuItem.DropDownMode |
| Style | MenuItemStyle.DropDownButtonStyle |
| Spacing | MenuItemStyle.DropDownButtonSpacing |
Scroll Button
Scroll Buttons appear automatically when a submenu’s content height exceeds the browser window height, and vertical scrolling is needed. Scroll buttons enable end-users to scroll items. When scrolling is not needed, the corresponding scroll buttons are hidden.
The table below lists the main members which affect the element’s appearance and functionality:
| Characteristics | Control Level Members | Item Level Members |
|---|---|---|
| Availability | ASPxMenu.EnableSubMenuScrolling | MenuItem.EnableScrolling |
| Image | ASPxMenuBase.ScrollDownButtonImage, ASPxMenuBase.ScrollUpButtonImage | MenuItem.ScrollDownButtonImage, MenuItem.ScrollUpButtonImage |
| Style | ASPxMenuBase.ScrollButtonStyle | MenuItem.ScrollButtonStyle |
Note, that item level members override control level members.
-
The root menu gutter is displayed if the menu is vertically oriented (the ASPxMenu.Orientation property is set to Vertical).