In this article I will explain with an example, how to change color of selected item depending on selection in ASP.Net Menu control.
 
 
HTML Markup
Following HTML Markup consists of a Menu control and SiteMapDataSource control inside the Master Page.
The ASP.Net Menu has been assigned with OnMenuItemDataBound event handler.
The LevelMenuItemStyles has beenspecified, 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.
<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 file which has all the Pages and the Child Pages present in the site.
In order to add sitemap right click on the project folder inside the Solution Explorer and select Site Map option from the Add New Item Dialog as shown below.
ASP.Net Menu control: Change color of selected item depending on selection
 
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, this article uses 2 Level Menu structure.
 
Following is the SiteMap, it has the following page structure.
Home => Home.aspx
Services
            Consulting => Consulting.aspx
            Outsourcing => Outsourcing.aspx
About => About.aspx
Contact => Contact.aspx
 
<?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>
 
 
Styling the ASP.Net Menu Control
Following CSS style is used in the Head section of the Master Page to apply CSS to the main menu and submenu.
Note: You can also make use of an external CSS class file.
 
<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
Following OnMenuItemDataBound event handler is called when Menu is rendered.
Inside the OnMenuItemDataBound event handler, if selected node Title is same as current item Text and the current item Parent is not null then item Parent Selected property is set to True else item Selected property is set to True.
Note: When a Child or Submenu is selected then its corresponding Parent Menu is also selected.
 
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
 
 
Screenshot
ASP.Net Menu control: Change color of selected item depending on selection
 
 
Demo
View Demo
 
 
Downloads
Download Code