I have tried to give the steps for using the MENU control.
Introduction
The Menu control is used to display expandable menu. You can use this menu to navigate to different pages of your site. When the cursor hovers over the menu, a node that contains child nodes is found to be expanded. Here, I have shown all the steps in details for a beginner, who is using this Menu control for the first time.
I have dealt with the Text property and
NavigateUrl property of the Menu control. The value of the Text property is displayed in the Menu control. If the
NavigateUrl property of a menu item is set, the Menu control navigates to the linked page.
Two types of menus are displayed by the Menu control. a. A Static Menu
b. A Dynamic Menu
The static menu is displayed in a Menu control. The menu items at the root level i.e., level 0 are displayed in the static menu.
A dynamic menu appears only when the cursor hovers over the parent menu item that contains a submenu.
Here I am going to show u how to create two menu items and link them with respective pages. For that I need to create two Web Forms:
i) Home.aspx
ii) AboutUs.aspx
Let me cite an example to explain Static Menu.
Now select a Menu Control from the Navigation Tab in the toolbox.
Drag a Menu control from Navigation Tab into your Default.aspx page.
Static Menu
Menu control is now shown in the
Design View of the
Default.aspx.
Select and click at Smart Tag (>) symbol at the top right of the Menu Control.
Click at
AutoFormat.
Here
Classic format is selected at Auto Format window.
Now click at
Edit Menu Items.
On clicking at Edit Menu Items, Menu Item Editor window opens.
To add an item, you have to click at the icon which is just below the text ‘
Items:’
Here I have shown this example with mainly two properties.
One is the
Text Property and the other is the
NavigationUrl Property.
Click on the icon just below
Items.
An item named
New Item is created.
Select the
New Item from the Menu Item Editor window.
Type Home in the
Text property. That is type the text which is to be displayed in the menu item. Click at the Browse button of the
NavigateUrl property also.
Select the Home.aspx page, bcoz we want the users to navigate to the Home.aspx page when he/she clicks on the Home menu.
Now type AboutUs in the
Text property of the next New Item
Click at the Browse button of the
NavigateUrl property now.
Select AboutUs.aspx from the SelectURL window.
Now AboutUs.aspx is selected. And click at the
OK Button.
The Menu control looks like this now.
If it is needed to be horizontally placed, right click on the Menu Control->Properties Orientation-> Horizontal.
Now see the menu control which has been horizontally placed.
Dynamic Menu
Now let’s understand the Dynamic Menu using my Example. Suppose, I want to add a sub-menu under Home menu. Select the Home menu in the Menu Item Editor window.
Now click on the child Item icon for adding sub-menus.
To navigate to two different pages on clicking at two new sub-menus, we need to create two new WebForms:
i) Home1.aspx
ii) Home2.aspx
Now the first child Item is named as HomeOne and its
Text property is set to HomeOne and
NavigateUrl property is set to Home1.aspx
Now the second child item is added to the Home item and its
Text and
NavigateUrl properties are set respectively. At last click on
OK.
Press F5 and view the output in the Browser.
On clicking at Home menu, we will be navigated to Home.aspx page.
Select HomeOne which is a child menu.
On Clicking the HomeOne child menu, we will be navigated to Home1.aspx.
This is the way by which we can navigate using
Menu Control.
If you like this article, subscribe to our 
RSS Feed. You can also subscribe via email to our Interview Questions, Codes and Forums section.