User Control for Tab Navigation

While developing a portal we came across a requirement where a tab navigation to be created and added in master page of the site. Here are the simple steps of how to create a tab navigation using ASP MENU control.

1. Go to your site/project and add a user control as new item.
2. There will be added one .ASCX file and one code file .ASCX.CS
3. We are not using code file here so delete code file (.ascx.cs)
4. Also delete code file reference from <%@ Control ... directive line (first line in file).

write the code to add asp menu and SiteMapDataSource
code below:

<%@ Control Language="C#" AutoEventWireup="true" %>
<div id="TabDiv" runat="server">
<table cellpadding="0" cellspacing="0" border="0" width="100%" class="TabMenuContainer">
<tr>
<td>
<asp:Menu CssClass="TabMenu" DataSourceID="CampaignPortalSiteMap" HideSelectElements="True"
ID="Menu2" Orientation="Horizontal" runat="server">
<StaticSelectedStyle CssClass="TabMenuItemSelected" />
<StaticMenuItemStyle CssClass="TabMenuItem" />
<StaticMenuStyle CssClass="SiteStaticMenu" />
<StaticHoverStyle CssClass="TabMenuItemHover" />
<DataBindings>
<asp:MenuItemBinding DataMember="SiteMapNode" Depth="0" NavigateUrlField="Url" TextField="Title"
ToolTipField="Description" />
</DataBindings>
</asp:Menu>
</td>
<td class="TabMenuSpacer" width="100%">
</td>
</tr>
</table>
</div>
<asp:SiteMapDataSource ID="CampaignPortalSiteMap" runat="server" ShowStartingNode="false"
SiteMapProvider="PortalSiteMap" />


In the code above:
ASP Menu control create navigation, it takes either a sitemap source as data source that can be bind to it, or menu items (statically or through code).

SiteMapDataSource is the sitemap provider reference, sitemap provider will be specified in web.config file of application.

There are many CSS classes for styling of tabs, that will be there in application's CSS file.

5. Now add the CSS file to define style classes, style sheet below:

body
{
font-family: Tahoma;
}

#MasterContainer
{
border: solid 1px black;
}

#BannerContainer
{
padding: 5px 5px 5px 5px;
font-weight: bold;
font-size: large;
}

.TabMenuContainer
{
border-top: solid 1px black;
}

.TabMenuItem
{
background-color: #FFFFBC;
text-align:center;
font-size: xx-small;
border: solid 1px black;
border-left: none;
padding: 3px 3px 3px 3px;
}
.TabMenuItemSelected
{
background-color: White;
text-align:center;
font-size: xx-small;
border-right: solid 1px black;
border-bottom: none;
border-top: none;
border-left: none;
padding: 5px 3px 5px 3px;
}
.TabMenuItemHover
{
color:Black;
font-weight: bold;
}
.SiteStaticMenu
{
margin: -1px 0px 0px 0px;
background-color: Black;
}
.TabMenuSpacer
{
background-color: #222222;
padding: 5px 5px 5px 5px;
}

#SiteContent
{
padding: 5px 5px 5px 5px;
margin: 10px 10px 10px 10px;
width: 100%;
}

.SiteContentSpacer
{
height: 200px;
visibility: hidden;
}#FooterContainer
{
font-size: xx-small;
border-top: solid 1px black;
}

Till now we are done with menu control and its look and feel, now we need to define the data source for that menu control.

6. Open web.config file of web application, go to section and add a provider that we had specified in used control.

<providers>
<add name="PortalSiteMap" type="System.Web.XmlSiteMapProvider" siteMapFile="portal.sitemap" />
</providers>

The last thing left now is to define sitemap file "portal.sitemap" from where asp menu would pick it's menu items.

7. Add a new sitemap item in project, naming portal.sitemap and put links, titles... of pages in specified xml format, sitemap xml below:

<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/ AspNet/SiteMap-File-1.0" >
<siteMapNode url="" title="" description="" roles="*">
<siteMapNode url="~/Home.aspx" title="Home" description="The home page" roles="*" />
<siteMapNode url="~/default2.aspx" title="Tab 1" description="The first tab" roles="*" />
<siteMapNode url="~/default.aspx" title="Google" description="Google search" roles="*" />
<siteMapNode url="http://www.yahoo.com" title="Yahoo" description="Yahoo search" roles="*" />
</siteMapNode>
</siteMap>


All set now, put this user control on your master page or page, wherever required and navigate...Cheers :-)

Happy Coding!!!