ASP.NET Easy Menu Documentation for .NET - Server side

Easy Menu Methods, Settings, Properties - Styles;
Easy Menu MenuItem, MenuSeparator;

<%@ Register TagPrefix="oem" Namespace="OboutInc.EasyMenu_Pro" Assembly="obout_EasyMenu_Pro" %>

Methods

Name Description
methodAddMenuItem Adds a new MenuItem to the menu.

AddMenuItem(id, innerHtml, icon, url, urlTarget, onClientClick)
  • id - Component ID.
  • innerHtml - Text or HTML to display inside the MenuItem. Optional
  • icon - Icon to display for the MenuItem. Optional
  • url - Url to open when item is clicked. Optional
  • urlTarget - Frame where the url is to be opened. Optional
  • onClientClick - Javascript code to execute when item is clicked. Optional
oem.AddMenuItem("menuItem1", "Our Products", null, null, null, null);
methodAddMenuItemAt Adds a new MenuItem to the menu at the specified index.

AddMenuItemAt(index, id, innerHtml, icon, url, urlTarget, onClientClick)
  • index - The index where the item is to be added to.
  • id - Component ID.
  • innerHtml - Text or HTML to display inside the MenuItem. Optional
  • icon - Icon to display for the MenuItem. Optional
  • url - Url to open when item is clicked. Optional
  • urlTarget - Frame where the url is to be opened. Optional
  • onClientClick - Javascript code to execute when item is clicked. Optional
oem.AddMenuItemAt(1, "menuItem1", "Our Products", null, null, null, null);
methodAddSeparator Adds a new MenuSeparator to the menu.

AddSeparator(id, innerHtml)
  • id - Component ID.
  • innerHtml - Text or HTML to display inside the item. Optional
oem.AddSeparator("menuSeparator1", "<hr noshade size= 1>");
methodAddSeparatorAt Adds a new MenuSeparator to the menu at the specified index.

AddSeparatorAt(index, id, innerHtml)
  • index - The index where the item is to be added to.
  • id - Component ID.
  • innerHtml - Text or HTML to display inside the item. Optional
oem.AddSeparatorAt(1, "menuSeparator1", "<hr noshade size= 1>");
method AddItem Adds a new item to the menu.

AddItem(item)
  • item - Any control derived from ItemBase to add to the menu.
oem.AddItem(new MenuItem("menuItem1", "Our Products"));
method AddItemAt Adds a new item to the menu at the specified index.

AddItemAt(index, item)
  • index - The index where the MenuComponent derivate is to be added to.
  • item - Any control derived from ItemBase to add to the menu.
oem.AddItemAt(1, new MenuItem("menuItem1", "Our Products"));
method RemoveItem Removes existing item from the menu.

RemoveItem(item)
  • item - An existing control derived from ItemBase to remove from the menu.
oem.RemoveItem(menuItem1);
method RemoveItemAt Removes existing item from the menu from the specified index.

RemoveItemAt(index)
  • index - The index from where the MenuComponent derivate will be removed.
oem.RemoveItemAt(1);
method RemoveItemByID Removes existing item with the specified id from the menu.

RemoveItemByID(id)
  • id - The menu item id that will be removed.
oem.RemoveItemByID("menuItem1");

Menu Settings

Name Description
property Width The width of the EasyMenu.
property AttachTo Controls IDs to which the menu is to attach itself (separated by commas).
Check this tutorial.
propertyShowEvent Can take one of the following values:
· ContextMenu
· MouseClick
· DoubleClick
· MouseOver
· Always
property ZIndex Sets the z-index css property for the menu.
property SelectedItemId The id of the menu item that will be selected.
property UseIcons Specifies whether the menu should use icons.
property SelectTreeNode Specifies whether the TreeView node is selected when context menu is displayed (only in case when menu is attached to a TreeView node).
property IconsPosition Specifies whether the icons should be displayed on the left side or right side of the menu.
propertyAlign EasyMenu's align position. Check this tutorial.
propertyPosition Can take one of the following values:
· Horizontal - menu items will be shown one near the other
· Vertical - menu items will be shown one under the other
propertyAlignMenuCorner Can take one of the following values:
· BottomLeft
· BottomRight
· TopLeft
· TopRight

To use this property, you must setAlign="Advanced".
You will also need to set the AlignElementCorner property. The menu will align the AlignMenuCorner to the AlignElementCorner.


Align="Advanced" AlignElementCorner="TopRight" AlignMenuCorner="TopLeft"
propertyAlignElementCorner Can take one of the following values:
· BottomLeft
· BottomRight
· TopLeft
· TopRight

To use this property, you must set Align="Advanced".
You will also need to set the AlignMenuCorner property. The menu will align the AlignMenuCorner to the AlignElementCorner.


Align="Advanced" AlignElementCorner="TopRight" AlignMenuCorner="TopLeft"
propertyOffsetHorizontal Horizontal menu offset relative to the mouse pointer. Check this tutorial.
propertyOffsetVertical Vertical menu offset relative to the mouse pointer. Check this tutorial.
propertyStyleFolder Path to the folder containing the style.css file with menu classes.
propertyIconsFolder Path to the folder containing the icons for the menu.
propertyEventsScriptPath The path to the client events script file.

Check also the menu events tutorial.
propertyEventList List of comma separated events to call.

Check also the menu events tutorial.
propertyKeepOpen Bool. If true, the menu will stay opened on lost focus.
Default: false

See also working example.
propertyEqualDivision Bool. If true, the width of the Horizontal menu will be divided equally among the items.

Default: false

Here you can see the difference in the menu appearance:

EqualDivision="false" :



EqualDivision="true" :


Properties - Styles

Name Description
property CSSMenu The CSS class name of the menu. Optional
property CSSMenuItemContainer The CSS class name of the menu container. Optional
propertyCSSClasses A CSSClasses object is a collection of css classes names for the different stages of any item that can be added to the menu.
It has the following properties:
  • ObjectType - The fully qualified name for the type of the item that this collection refers to. (read only)
  • AppliesTo - The short name for the type of the item that this collection refers to. (read only)
  • Component - The CSS class name for the item.
  • ComponentOver - The CSS class name for the item on mouse over.
  • ComponentLeftRoundCornerCell - The CSS class name for the item's left rounded cell.
  • ComponentLeftRoundCornerCellOver - The CSS class name for the item's left rounded cell on mouse over.
  • ComponentIconCell - The CSS class name for the item's icon cell.
  • ComponentIconCellOver - The CSS class name for the item's icon cell on mouse over.
  • ComponentContentCell - The CSS class name for the item's content cell.
  • ComponentContentCellOver - The CSS class name for the item's content cell on mouse over.
  • ComponentSubMenuCell - The CSS class name for the item's sub menu cell.
  • ComponentSubMenuCellOver - The CSS class name for the item's sub menu cell on mouse over.
  • ComponentRightRoundCornerCell - The CSS class name for the item's right rounded cell.
  • ComponentRightRoundCornerCellOver - The CSS class name for the item's right rounded cell on mouse over.

An item is any control derived from ItemBase.

propertyCSSClassesCollection Collection of CSSClasses.

Entries are added automatically to this collection upon adding a new item to the menu. There can be only one CSSClasses entry for a type of item that the menu contains. If an item is added to the menu and a CSSClasses object for it already exists then no new entry is created for it.

Example:
// a new MenuItem is added to the menu and automatically a new
// CSSClasses with ObjectType=MenuItem is added to the
// CSSClassesCollection and can be edited

oem.AddMenuComponent(new MenuItem("menuItem1", "Our Products"));
// a CSSClasses entry for MenuItem type is already in the collection
// so a new entry for it is not created

oem.AddMenuComponent(new MenuItem("menuItem2", "Our Clients"));
// no entry for MenuSeparator is found in the collection so a new
// CSSClasses one is created

oem.AddMenuComponent(new MenuSeparator("menuSeparator1"));
// modify the class name for the MenuItem type
// both menuItem1 and menuItem2 will use this new css class name!

oem.CSSClassesCollection["MenuItem"].Component = "myNewMenuItemClass";


MenuItem Properties

Name Description
property ID Component ID.
property InnerHtml Text or HTML to display inside the MenuItem. Optional
property AllowsIcon Whether this MenuItem allows an icon to be displayed for it or not (only used if menu UseIcons is true). Optional
property Icon Icon to display for the MenuItem. Optional
property Url Url to open when item is clicked. Optional
property UrlTarget Frame where the url is to be opened. Optional
property Disabled MenuItem is disabled ("true") or enabled ("false"). Optional
property Visible Specifies whether the menu item is visible or not. Optional
propertyOnClientClick Javascript code to execute when item is clicked.

There are four parameters that can be used to refer to the click event:
· targetEl - a reference to the element over which the right click occured
· menuObject - a reference to the menu item that was clicked
· menuEvent - the event that triggered the item selection (useful for getting cursor information, etc.)
· easyMenu - a reference to the EasyMenu to which the clicked option belongs


Example:
// upon clicking this MenuItem, the id of the element
// over which the right click occured will be shown

<oem:MenuItem id="menuItem1" OnClientClick="alert(targetEl.id)">Show</oem:MenuItem>
propertyAutoHideMenu If the menu should auto-hide after the option is clicked. Default is true.

Note: If this is set to false, in the script specified by OnClientClick, the menu can be closed using easyMenu.hideMenu();


MenuSeparator Properties

Name Description
property ID Component ID.
property InnerHtml Text or HTML to display inside the MenuSeparator. Optional
property Visible Specifies whether the menu separator is visible or not. Optional
property AllowsIcon Whether this MenuSeparator allows an icon to be displayed for it or not (only used if menu UseIcons is true). Optional
property Icon Icon to display for the MenuSeparator. Optional
obout.com
obout.com Home
News
Easy Menu Home 
Easy Menu Home
Download
Site Map
Compare with Text Menu
Examples - 79
Appearance - 11
Live Styles
Horizontal Right To Left
Transparent - over flash
MSDN 2
With rounded corners
Keep Open New
Expand Animations New
Vertical 1
MS Vertical
Vertical Right To Left
Context Menu - 10
World Map
Default
Futura
VSNET
Windows
WindowsXP
Style 1
Style 2
Style 3
Right To Left
Tab Strip - 8
Tab Strip
Live Styles
Tab Strip - With postback New
Parent Child Tabstrip New
Tab Strip - Wizard
Tab Strip - Wizard 2
Add / Remove Tabs
Add / Remove Tabs 2
Time Picker - 1
Time Picker
Populating with data - 5
Binding to DataReader New
Binding to DataTable New
Binding to SqlDataSource New
Binding to ObjectDataSource New
Fast loading time
Multi Column Menu - 2
Multi Column Submenu New
Multi Column Submenu with Icons New
Multiple menus - 3
Multiple menus
Multiple menus 2
Horizontal menu and Tab Strip
Operations - 9
ShowEvent New
Add / Remove Items New
Hide / Show Items New
Menu item inner HTML New
Attach / Detach
Menu Events
OnClientClick
Menu item postback
Show menu New
Align/Position - 4
Align
Advanced Align
Menu Offsets
Position
Integration  - 14
TreeView - 5
Attach to TreeView
Dynamic Loading
Inside callback panel
Select the TreeView node New
TreeView inside Easy Menu
AJAX Page - 3
Inside AJAX Page panel
Inside MS AJAX panel
Add items server side
Grid - 2
Use With Grid
Inside DataGrid column
Inside WindowNew
Build from SiteMap
Over Java Applet
With Data Controls New
Other features - 12
AttachTo
Menu Icons
Menu Customize
Long vertical menus
Long menu items
Disabled menu item
Sub-menus
Dynamic Easy Menu Item
Full Easy Menu width
Hide menu with time delay
Custom sliding effect New
Custom Menu Content New
Knowledge Base - 1
Knowledge Base
Documentation - 4
Server side
Client side
Using the correct path
ChangeLog
Tutorials - 2
Using Database
Postback Persistance