Many times question asked from me about asp.net Horizontal Menu, So i decided to write an article, how to display ASP.NET Horizontal Navigation Menu using Sitemap,apply Skin and StyleSheet on it.
Overview
- Introduction
- SiteMap
- Menu Control
- SiteMapDataSource control
- Web.Config file
- Theme and Skin
- Cascading Style Sheet
- IE 8 rendering Issue
- Add the IE7 Meta
- Menu rendering issue in Google Chrome, Safari and Opera
- Configure Multiple Site Maps
- Browser Tested
- Download
- Demo
Introduction
ASP.NET menu control have display two mode Static and Dynamic. static or dynamic view using Sitemap with Data Source control. Open your Visual Studio 2008 and create a ASP.NET WebSite, as shown in figure 1
Figure 1
SiteMap
Sitemap File is in XML format that is named Web.sitemap. Site map file must contain <siteMap> tag surrounding the content. Each <siteMap> tag have only <stieMapNode> child tag. Each siteMapNode have several child nodes Each section siteMapNode has URL, title, description,value, tooltip attributes.Let us now create a Site Map file. Right click web site menu and select the Add New Item from menu option. Select the Site Map file from Viusal Studio Installed Template window and click Add button to continou.You will see, Visual Studio automatically genarate intial code as shown in Listing 1,remove it and copy code from below Listing 1 and paste this code into your Site Map File (Web.SiteMap) you created.
Listing 1
<?xml version="1.0" encoding="utf-8" ?>
<siteMap>
<siteMapNode title="Home" value="Home" tooltip="Home" url="~/welcome.aspx" param="1">
<siteMapNode title="Menu 1" value="Planner" tooltip="Menu 1" url="" param="id" >
<siteMapNode title="Sub Menu 1" value="cAdd" tooltip="Sub Menu3 1" url="~/SubMenu1.aspx"/>
<siteMapNode title="Sub Menu 2" value="brv" tooltip="Sub Menu3 2" url="~/SubMenu2.aspx"/>
<siteMapNode title="Sub Menu 3" value="bpv" tooltip="Sub Menu3 3" url="~/SubMenu3.aspx"/>
<siteMapNode title="Menu 2" value="Patient-Update" tooltip="Update the Patient" url="~/Menu2.aspx"/>
</siteMapNode>
<siteMapNode title=" Menu 3" value="Billing" tooltip="Private Patient Billing" >
<siteMapNode title=" Sub Menu3 1 " value="Sub Menu3 1" tooltip="Sub Menu3 1" url="~/SubMenu31.aspx" />
<siteMapNode title=" Sub Menu3 2 " value="Sub Menu3 2" tooltip="Sub Menu3 2" url="~/SubMenu32.aspx" />
<siteMapNode title=" Sub Menu3 3 " value="Sub Menu3 3" tooltip="Sub Menu3 3" url="~/SubMenu33.aspx" />
<siteMapNode title=" Sub Menu3 4" value="Sub Menu3 4" tooltip="Sub Menu3 4" url="~/SubMenu34.aspx" />
</siteMapNode>
<siteMapNode title="Menu 4" value="reports" tooltip="Patient Summary" >
<siteMapNode title="Sub Menu4 1 " value="" tooltip="Sub Menu4 1" url="~/SubMenu1.aspx?ReportName=1" />
<siteMapNode title="Sub Menu4 2" value="" tooltip="Sub Menu4 2" url="~/SubMenu41.aspx"/>
<siteMapNode title="Sub Menu4 3" value="" tooltip="Sub Menu4 3" url="~/SubMenu42.aspx"/>
<siteMapNode title="Sub Menu4 4" value="" tooltip="Sub Menu4 4" url="~/SubMenu43.aspx?ReportName=3"/>
<siteMapNode title="Sub Menu4 5" value="" tooltip="Sub Menu4 5" url="~/SubMenu44.aspx"/>
<siteMapNode title="Sub Menu4 6" value="" tooltip="Sub Menu4 6" url="~/SubMenu45.aspx"/>
</siteMapNode>
<siteMapNode title=" Menu 5 " value="Rebuilt" tooltip="Menu 7" >
</siteMapNode>
<siteMapNode title=" Menu 6 " value="Rebuilt1" tooltip="Menu 6" >
</siteMapNode>
<siteMapNode title=" Menu 7 " value="SO" tooltip="Sign Out" url="~/signout.aspx" >
</siteMapNode>
</siteMapNode>
</siteMap>
Menu Control
Menu control is server side control,you can control appearance, orientation of menu control. you can apply skin and themes on menu control,now you don't need to write a code for menu,you can bind menu control with data source.
Open your default.aspx page and drop and drop Menu control from Toolbar as shown in figure 1.1.
Figure 1.1
SiteMapDataSource control
Bind to hierarchical site map data is called SiteMapDataSource control. you can also use SiteMapDataSource control with other controls.
Listing 1.2
<asp:SiteMapDataSource ID="SamplesSiteMapAamirHasan" runat="server" SiteMapProvider="SamplesSiteMapAamirHasan" />
Note:When you select the SiteMapDataSource for Menu Control, you will be able to View the Site Map contents inside the Menu Control.
Web.Config file
To use this in your website, you need to add the following code to the web.config file as shown in listing 1.3
Listing 1.3
<siteMap defaultProvider="SamplesSiteMapAamirHasan">
<providers>
<add name="SamplesSiteMapAamirHasan" type="System.Web.XmlSiteMapProvider" siteMapFile="Web.sitemap"/>
</providers>
</siteMap>
Theme and Skin
Combination of Skin, css,images, and other resources is called Theme.Right Click on your web site , Add ASP.NET Folder - >Theme as shown in figure 1.3, Theme1 folder is created, rename theme folder to default.Let create a Menu Skin, Right click on default folder under the App_Theme folder ,select Add New Item from menu option, select Skin File from Add New item window and name it Menu.Skin.Paste below listing 1.3 code in you Menu.Skin file.
Listing 1.3
<asp:Menu runat="server" Orientation="Horizontal" StaticDisplayLevels="2" CssClass="MainMenu">
<DynamicMenuStyle CssClass=".IE8FixIssue" />
<StaticMenuItemStyle CssClass="Menu-Skin-StaticItem" />
<StaticHoverStyle CssClass="Menu-Skin-StaticItemHover" />
<DynamicMenuItemStyle CssClass="Menu-Skin-StaticItemDown" />
<DynamicHoverStyle CssClass="Menu-Skin-DynamicHover" />
<StaticSelectedStyle CssClass="Menu-Skin-DynamicHover" />
<DynamicSelectedStyle CssClass="Menu-Skin-DynamicSelected" />
</asp:Menu>
Cascading Style Sheet
.MainMenu
{
color:Black;
font-family: tahoma;
font-size:11px;
font-weight: bold;
text-decoration: none;
margin-top:0px;
margin-bottom:1px;
padding:1px 1px 1px 1px;
}
.MainMenu A:link,
.MainMenu A:active,
.MainMenu A:visited,
.MainMenu A:hover
{
color:Black;
font-family: tahoma;
font-size:11px;
font-weight: bold;
text-decoration: none;
padding:1px 1px 1px 1px;
}
.Menu-Skin-StaticItem
{
border-right:1px #999999 solid;
padding:1px 1px 1px 1px;
background:#f1f1f1 url(images/menu_bk.jpg) repeat-x;
font-size:11px;
height:24px;
font-family: tahoma;
font-size:11px;
font-weight: bold;
}
.Menu-Skin-StaticItemDown
{
border-right:1px #999999 solid;
text-decoration:none;
color:Black;
padding:1px 1px 1px 1px;
background:#f1f1f1 url(images/menu_bk_down.gif) repeat-x;
font-size:11px;
height:24px;
}
.Menu-Skin-StaticItemDown A:link
{ border-right:1px #999999 solid;
text-decoration:none;
color:Black;
height:24px;
}
.Menu-Skin-DynamicHover
{
border-left:1px #999999 solid;
border-right:1px #999999 solid;
border-bottom:1px #999999 solid;
border:1px #ffffff solid;
padding:1px 1px 1px 1px;
background:#999999 url(imagses/menu_bk_hover.gif) repeat;
font-size:11px;
color: #999999;
height:24px;
font-family: tahoma;
font-weight: bold;
}
.Menu-Skin-DynamicHover A:link,
.Menu-Skin-DynamicHover A:active,
.Menu-Skin-DynamicHover A:visited,
.Menu-Skin-DynamicHover A:hover
{
border-bottom:1px #999999 solid;
color:White;
font-family: tahoma;
font-size:11px;
font-weight: bold;
padding:1px 1px 1px 1px;
text-decoration: none;
}
.Menu-Skin-StaticItemDown, .Menu-Skin-StaticItem A:link,
.Menu-Skin-StaticItemDown,.Menu-Skin-StaticItem A:active,
.Menu-Skin-StaticItemDown,.Menu-Skin-StaticItem A:visited,
.Menu-Skin-StaticItemDown,.Menu-Skin-StaticItem A:hover
{
border-bottom:1px #999999 solid;
color:Black;
font-family: tahoma;
font-size:11px;
font-weight: bold;
padding:1px 1px 1px 1px;
text-decoration: none;
}
.IE8FixIssue
{
z-index: 100;
}
Figure 1.3
IE 8 rendering Issue
Dont warry, you have to overriding the z-index propert.As i have apply z-index property in the above css and skin.Open your Menu.skin file from Theme folder as shown in Listing 1.4
Listing 1.4
<DynamicMenuStyle CssClass="IE8FixIssue" />
copy IE8FixIssue Class and paste it in Menu.css file under default theme folder
Listing 1.5
.IE8FixIssue
{
z-index: 100;
}
Add the IE7 Meta
Windows Internet Explorer 8 will attempt to display content using its most standards-compliant mode. Now you can switch to the IE7 standard mode by adding META tag under the HEAD of the page as shown in below Listing 1.6. you can also add it into your Web.Config file as shown in Listing 1.7
Listing 1.6
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
Listing 1.7
<?xml version="1.0" encoding="utf-8"?>
<configuration>
<system.webServer>
<httpProtocol>
<customHeaders>
<clear />
<add name="X-UA-Compatible" value="IE=EmulateIE7" />
</customHeaders>
</httpProtocol>
</system.webServer>
</configuration>
Menu rendering issue in Google Chrome and Safari
Right click on you web site select add ASP.NET Folder from menu option, and click App_Browsers as shown in below figure 1.7. Right click on App_Browser folderAdd New Item, Add New Item window will be display on your screen, select Browser File and enter safari.browser name in the file name textbox. Open Safari.browser file, add small piece of code under the broswer tag as given below in listing 1.8.
Figure 1.7
Listing 1.8
<browser refID="safari">
<controlAdapters>
<adapter controlType="System.Web.UI.WebControls.Menu" adapterType="" />
</controlAdapters>
</browser>
Configure Multiple Site Maps
you can configure multiple sitemap as given below listing 1.9
Listing 1.9
<siteMap defaultProvider="SamplesSiteMapAamirHasan">
<providers>
<add name="SamplesSiteMapAamirHasan" type="System.Web.XmlSiteMapProvider" siteMapFile="Web.sitemap"/>
<add name="SamplesSiteMapAamirHasan2" type="System.Web.XmlSiteMapProvider" siteMapFile="Web2.sitemap"/>
</providers>
</siteMap>
Tested
I have tested this Menu example on following browsers as show in figure 1.8
- Internet Explorer 7
- Internet Explorer 8
- FireFox
- Google Chrome
- Opera
- Safari
- IPad
- IPod
Figure 1.8
- Internet Explorer 7 Result
Download
you can download source code from here Horizontal_Menu.zip (31.20 kb)
Demo
Links