Using ASP.Net Menu control with example in C#.

This article 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.

Once the file is added you need to structure it based on the Level 1 Pages and the Child Pages.

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.

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;

            }

        }

    }

}