I have tried to give the steps for using the MENU control.
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:
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.
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
Click on the icon just below Items
An item named New Item
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
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
Select AboutUs.aspx from the SelectURL window.
Now AboutUs.aspx is selected. And click at the OK
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.
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:
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
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