Menu

The Menu control represents a customizable web menu.

Server side

• Accessing items
  Use the Items property to get a reference to the control's collection of root items. Use the MenuItem.Children property to get a reference to the corresponding collection of child items.
  
  
• Customizing the control
  The Menu control supports three different interaction modes, as specified in the NavigationStyle enumeration.
  MenuItems can be arranged horizontally or vertically by setting the Orientation property.
  
  
• Adding items
  Use Menu.Items.Add method to add root items to the control's Items collection.
  
  

  C#  Copy Code
  MenuItem item = new MenuItem(); item.Title = "Menu item"; Menu1.Items.Add(item); Menu1.DataBind();

  
  

  VB.NET  Copy Code
  Dim item As New MenuItem() item.Title = "Menu item" Menu1.Items.Add(item) Menu1.DataBind()

  
  
  Use MenuItem.Children.Add method to add a child item to the corresponding item's Children collection.
  
  

  C#  Copy Code
  Menu1.Items[0].Children.Add(new MenuItem { Title = "Child item"}); Menu1.DataBind();

  
  

  VB.NET  Copy Code
  Menu1.Items(0).Children.Add(New MenuItem() With { .Title = "Child item" }) Menu1.DataBind()

  
  
• Removing items
  Use Menu.Items.Remove or Menu.Items.RemoveAt methods to remove root items from the control's items collection.
  
  

  C#  Copy Code
  Menu1.Items.RemoveAt(0); Menu1.DataBind();

  
  

  VB.NET  Copy Code
  Menu1.Items.RemoveAt(0) Menu1.DataBind()

  
  
• UseMenuItem.Children.Remove or MenuItem.Children.RemoveAt methods to remove a child item from the corresponding item's Children collection.
  
  

  C#  Copy Code
  Menu1.Items[0].Children.Remove(Menu1.Items[0].Children[0]); Menu1.DataBind();

  
       

  VB.NET  Copy Code
  Menu1.Items(0).Children.Remove(Menu1.Items(0).Children(0)) Menu1.DataBind()

          
• Events
  The following events are exposed by the Menu class.
  
  

  Event	Event arguments	Description
  ItemClicked	MenuItemEventArgs	Raised when a MenuItem is clicked.
  ItemCreated	MenuItemEventArgs	Raised when a new MenuItem is created.
  ItemDeleted	MenuItemEventArgs	Raised when a MenuItem is deleted.

Client side

• Getting a reference to the control
  You can access the control on the client side by its ClientID.
   

  JavaScript  Copy Code
  var menu = $find("Menu1"); var menu = $find("<%= Menu1.ClientID %>");

• Accessing items
  Use the Menu.getAllItems method to get a reference to the control's items collection. Use the MenuItem.getAllItems method to access the collection of the item's child items.
  
  
• Expanding and collapsing items
  To expand or collapse menu items programmatically use MenuItem's expand and collapse methods.
  
  

  JavaScript  Copy Code
  var items = menu.getAllItems(); for (var i = 0, l = items.length; i < l; i++) {     if ($get("Checkbox1").checked)         items[i].expand();     else         items[i].collapse(); }

  
  
• Adding items
  Use the Menu.createItem method to add a new root item to its items array. The createItem method accepts as parameter a JSON object, containing the data for the new item. Use the data object to define values for the properties and events, exposed by the MenuItem class.
  
  

  JavaScript  Copy Code
  menu.createItem({ properties: {title:"root item", imageUrl: "Images/RootItem.jpg"} });

  
  Use the MenuItem.createItem method to add a new child item to its collection of child items.
  
  

  JavaScript  Copy Code
  var item = menu.getAllItems()[0]; item.createItem({ properties: { title: "child item", imageUrl: "Images/ChildItem.jpg"} });

• Removing items
  Use the MenuItem.deleteItem method to remove a specified item from the collection.
  
  

  JavaScript  Copy Code
  menu.deleteItem(menu.getAllItems()[0]);

  
  
• Events
  The following client-side event are exposed by the Menu class.
  
  

  Event	Event arguments	Script property	Description
  itemClicked	MenuItemEventArgs	ItemClickedScript	Raised when a MenuItem is clicked
  controlLoaded	-	ControlLoadedScript	Raised just after the control has finished loading and is ready for interaction.