Menu Example in ASP.NET using C#

In this article we will introduce with Menu control in ASP.NET using C#.

Menu Example in ASP.NET using C#

Menu control in ASP.NET is used for navigation. Menu control is a navigation control. You can provide the item to menu control by using item collection editor or SiteMapDataSource or XMLDataSource. You will provide the style using CSS or through property of Menu control.
There are two types of MenuControl.

1. StaticMenu : That is always displayed on the page.
2. DynamicMenu : That pops-out when a parent MenuItem is hovered over.

In this example we use the SiteMapDataSource for bind the data to Menu control. When we click the MenuItem it will navigate on related page. You provide the AutoFormat for MenuStyle you can see the following figure.

Menu.aspx (Design Page):

Web.sitemap file:

<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
<siteMapNode url="http://www.devmanuals.com/" title="ASP.NET" description="ASP.NET Tutorials">
<siteMapNode url="http://www.devmanuals.com/tutorials/ms/aspdotnet/index.html" title="Controls" description="Standards Controls">
<siteMapNode url="~/TextBox.aspx" title="TextBox" description="TextBox Control"/>
<siteMapNode url="~/BulletList.aspx" title="BulletList" description="BulletList Control"/>
<siteMapNode url="~/Image.aspx" title="Image" description="Image Control"/>
<siteMapNode url="~/ImageMap.aspx" title="ImageMap" description="ImageMap Control"/>
</siteMapNode>
<siteMapNode url="http://www.devmanuals.com/tutorials/ms/aspdotnet/requiredfieldvalidator.html" title="Validator" description="Validation Controls">
<siteMapNode url="~/RequiredFieldValidator.aspx" title="RequiredFieldValidator" description="RequiredFieldValidator"/>
<siteMapNode url="~/CompareValidator.aspx" title="CompareValidator" description="CompareValidator"/>
<siteMapNode url="~/RangeValidator.aspx" title="RangeValidator" description="RangeValidator"/>
<siteMapNode url="~/RegularExpressionValidator.aspx" title="RegularExpressionValidator" description="RegularExpressionValidator"/>
<siteMapNode url="~/CustomValidator.aspx" title="CustomValidator" description="CustomValidator"/>
<siteMapNode url="~/ValidationSummary.aspx" title="ValidationSummary" description="ValidationSummary"/>
</siteMapNode>
</siteMapNode>
</siteMap>

Menu.aspx (source code):

<%@ Page Title="" Language="C#" MasterPageFile="~/RoseindiaMaster.master" AutoEventWireup="true"
CodeFile="Menu.aspx.cs" Inherits="Menu" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<div>
<h2 style="color: Green">
Menu in ASP.NET 4, C#
</h2>
<asp:Menu ID="Menu1" runat="server" DataSourceID="SiteMapDataSource1" BackColor="#FFFBD6"
DynamicHorizontalOffset="2" Font-Names="Verdana" Font-Size="Small" ForeColor="#990000"
StaticSubMenuIndent="13px" BorderStyle="Solid" BorderWidth="2px" 
BorderColor="Black" Font-Bold="True">
<DynamicHoverStyle BackColor="Black" ForeColor="White" />
<DynamicMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
<DynamicMenuStyle BackColor="#FFFBD6" />
<DynamicSelectedStyle BackColor="#FFCC66" />
<DynamicItemTemplate>
<%# Eval("Text") %>
</DynamicItemTemplate>
<StaticHoverStyle BackColor="#990000" ForeColor="White" />
<StaticMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
<StaticSelectedStyle BackColor="#FFCC66" />
</asp:Menu>
<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />
<br />
</div>
</asp:Content>

Output: