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.
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 twoMenuItemStyle 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
