In this article I have explained how to use ASP.Net Menu control with Menus and Submenus. The ASP.Net Menu control will be populated using Sitemap and ASP.Net SiteMapDataSource control.
This article also describes how we can selected the Menu and the Submenu or child item and change its CSS styles such has font, color, background color, etc.
 
HTML Markup
Below is the HTML Markup of the Master Page Main.Master that contains the Menu control as well as the SiteMapDataSource control.
<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" ShowStartingNode="false" />
<asp:Menu ID="Menu" runat="server" DataSourceID="SiteMapDataSource1" Orientation="Horizontal"
    OnMenuItemDataBound="OnMenuItemDataBound">
    <LevelMenuItemStyles>
        <asp:MenuItemStyle CssClass="main_menu" />
        <asp:MenuItemStyle CssClass="level_menu" />
    </LevelMenuItemStyles>
</asp:Menu>
 
 
Adding the Sitemap XML and understanding its use
Sitemap is nothing but a map of your site, it is an XML files which has all the Pages and the Child Pages present in the site. Whenever a new page has to be added to your site, you simply need to add its node in the sitemap XML file and the ASP.Net Menu control will automatically grab and display it.
Sitemap can be added using Add New Item Dialog of Visual Studio as shown below.
Using ASP.Net Menu control with example in C# and VB.Net
 
Once the file is added you need to structure it based on the Level 1 Pages and the Child Pages.
Note: You can have as many child levels as you want, here I am using 2 Level Menu structure
 
Below is the sitemap I am using for this article, it has the following page structure.
<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
 <siteMapNode url=""title="Home" description="">
    <siteMapNode url="Home.aspx" title="Home" description="Home Page" />
    <siteMapNode url="javascript:;" title="Services" description="Services Page">
      <siteMapNode url ="Consulting.aspx" title="Consulting" description="Consulting Page"></siteMapNode>
      <siteMapNode url ="Outsourcing.aspx" title="Outsourcing" description="Outsourcing Page"></siteMapNode>
    </siteMapNode>
    <siteMapNode url="About.aspx" title="About" description="About Us Page" />
    <siteMapNode url="Contact.aspx" title="Contact" description="Contact Us Page" />
 </siteMapNode>
</siteMap>
 
Home => Home.aspx
Services
            Consulting => Consulting.aspx
            Outsourcing => Outsourcing.aspx
About => About.aspx
Contact => Contact.aspx
 
 
Styling the ASP.Net Menu Control
I have placed the following CSS style in the Head section of the Master Page. You can also make use of an external CSS class file.
In the HTML Markup section you will notice I have specified <LevelMenuItemStyles>, which consists of two MenuItemStyle nodes. The first one is for the CSS Class of the top level or main menu and the second one is for the child or submenu
<style type="text/css">
    body
    {
        font-family: Arial;
        font-size: 10pt;
    }
    .main_menu
    {
        width: 100px;
        background-color: #8AE0F2;
        color: #000;
        text-align: center;
        height: 30px;
        line-height: 30px;
        margin-right: 5px;
    }
    .level_menu
    {
        width: 110px;
        background-color: #000;
        color: #fff;
        text-align: center;
        height: 30px;
        line-height: 30px;
        margin-top: 5px;
    }
    .selected
    {
        background-color: #852B91;
        color: #fff;
    }
</style>
 
 
Setting the Selected Menu at Runtime
In the HTML markup you will notice that I have specified OnMenuItemDataBound event of the ASP.Net Menu control. Here I have written the code to select the Menu so that it appears selected when rendered.
 
Note: When a Child or Submenu is selected then I am selecting its corresponding Parent Menu.
 
C#
 
protected void OnMenuItemDataBound(object sender, MenuEventArgs e)
{
    if (SiteMap.CurrentNode != null)
    {
        if (e.Item.Text == SiteMap.CurrentNode.Title)
        {
            if (e.Item.Parent != null)
            {
                e.Item.Parent.Selected = true;
            }
            else
            {
                e.Item.Selected = true;
            }
        }
    }
}
 
VB.Net
 
Protected Sub OnMenuItemDataBound(sender As Object, e As MenuEventArgs)
    If SiteMap.CurrentNode IsNot Nothing Then
        If e.Item.Text = SiteMap.CurrentNode.Title Then
            If e.Item.Parent IsNot Nothing Then
                e.Item.Parent.Selected = True
            Else
                e.Item.Selected = True
            End If
        End If
    End If
End Sub
 
 
Using ASP.Net Menu control with example in C# and VB.Net
 
 
Demo
 
 
 
 
Downloads