Apply to

Overview

An EO.Web navigation control is made up of a hierarchy of items represented by BaseMenuItem object, which controls an item's appearance and behavior.

Menu and SlideMenu use MenuItem object, TabStrip uses TabItem object. Both are inherited from BaseMenuItem object.

BaseMenuItem is highly customizable. The following table shows three types of commonly used BaseMenuItem:

EO.Web Navigation controls provide a set of client side JavaScript API to access the control. See client side script interface for API reference.

This section covers the following topics:

• An item with LeftIcon, Text and RightIcon
• An item with LeftIcon, CustomItem and RightIcon
• An item with image as the whole content

An item with LeftIcon, Text and RightIcon

Most items are made up of LeftIcon, Text and sometimes RightIcon. Here is a sample of an item with a left icon, text and right icon:

An item has the following states: Normal, Hover, Expanded, Selected, SelectedHover, SelectedExpanded and Disabled. See item states topic for detail.

You can specify different left icons and right icons for each state. For example, you can use one icon for the "Normal" state, another icon for the "Hover" state.

You can also specify different styles for each state. For example, NormalStyle, HoverStyle, SelectedStyle. It's not neccessary to provide styles settings for every states. For example, if ExpandedStyle is not specified, HoverStyle is used.

Tip: Always try to use look item to specify styles.

An item with LeftIcon, CustomItem and RightIcon

CustomItem is used to host one or more ASP.NET web controls, such as CheckBox, Calendar and ColorPicker. You can put HTML tags inside a CustomItem tag. To associate a CustomItem with an item, specify the item's CustomItemID property to the ID of the CustomItem. The content of the CustomItem is displayed as the content of the item.

Here is a sample of an item with LeftIcon, CustomItem (a checkbox) and RightIcon:

You can also bind data source to a CustomItem and include the custom item as part of the template item that is used to generate data binding items. See Data Binding for details.

Note: When CustomItem is used, Text property is ignored but LeftIcon and RightIcon are still rendered.

For details on how to use CustomItem, please refer to Custom Item Overview topic.

An item with image as the whole content

Image can be displayed as the whole content of an item.

Here is an example of an image-based Menu:

Use item's Image property to define a set of Urls for images in different states. See item states for details on item states.

When BaseMenuItem's Image property is specified, LeftIcon, Text, CustomItem, CustomItemID and RightIcon properties are all ignored.