In this lesson you will learn how to use the C1Menu Designer Form editor to access the C1Menu Designer Form, add menu items and sub-menu items, and set the Text, NavigateUrl, and Target properties for the menu items.
1. Add C1Menu to your page.
2. Select the right arrow to open the C1Menu Tasks menu, click Edit Menu to open the C1Menu Designer Form.
3. Right-click on C1Menu1, select Add Child and then Link Item.
4. Select LinkItem01 and select the Text property and enter "Menu Item 1".
5. Right click on Menu Item 1 and select Insert Item and then Link Item. Repeat this twice to add new menu items. Each menu item will be added above the current one.
6. Select LinkItem01 and click on the down arrow button to move the item down once. Select LinkItem02 and click on the down arrow twice to move it down two positions.
7. Select LinkItem01 and select the Text property and enter "Menu Item 2".
8. Select LinkItem02 and select the Text property and enter "Menu Item 3".
9. Click OK to close and save the menus.
The C1Menu control updates with three new static menu items.
Next, we'll add dynamic menus to our C1Menu control.
Adding Sub Menu Items
1. Open the C1Menu Designer Form.
2. Right-click on Menu Item 1 and select Add Child then select Link Item.
A link item appears as a sub-menu of Menu Item 1.
3. Right-click on LinkItem01, select Add Child then select Link Item.
Another link item appears above LinkItem01 as a sub-menu of Menu Item 1.
To add more sub-menus to a specific menu item select the menu item where you want to place the sub-menu and select Add Child.
4. Click OK to save and close the menus we added in the C1Menu Designer Form.
5. Press F5 to run the project.
6. Mouse over Menu Item 1 to expose the sub-menu items we added in the previous steps.
Notice how the menu items backcolor changes to blue and its forecolor to white when we mouse over them. This is because the property, UseEmbeddedVisualStyles is set to True. If we set this property to False, the style is removed from the C1Menu control.
Adding a URL to the Link Item
1. Select Menu Item 1 in the C1Menu Designer Form and locate the NavigateUrl property and enter the text, "http://www.componentone.com".
2. Click OK to save and close the C1Menu Designer Form.
3. Build the project.
4. Click on Menu Item 1 and the Web Site for ComponentOne appears.
Specifying a target for the link items navigation
1. Select Menu Item 1 in the C1Menu Designer Form and enter, main, next to the Target property in the property grid.
2. Click on the Source tab in your index.aspx Web page and add the iframe code in the body before the form tag:
<iframe name="main" width="85%" height="50%">
</iframe>
3. Click on the Design tab and drag the Iframe below the C1Menu control.
4. Build the project.
5. Click on Menu Item 1 and the Web Site for ComponentOne appears below in the Iframe.
Changing the Menu Item's Position in the
C1Menu Designer Form
|
