 Site navigation and Page layout

A website is often divided into headers, menus, content and a footer:There are tons of different layout
designs to choose from. However, the structure above, is one of the most common, and we will take a closer
look at it in this tutorial.
Web “sites” are complete abstractions—they don’t exist, except in our heads. When we identify a site as
such, what we’re really describing is a collection of individual linked pages that share a common graphic
and navigational look and feel. What creates the illusion of continuity across a cohesive “site” is the design
features that pages share. Individual HTMLpages and how they are designed and linked are the atomic unit of
web sites, and everything that characterizes site structure must appear in the page templates.

1. Page elements
As the web has matured over the past decade, the structure of web pages in text-driven information sites has become more
uniform and predictable. Although not all web pages share the exact layout and features described here, most web pages
incorporate some or all of these basic components, in page locations that have become familiar to web users (fig.1).

Fig.1 — A canonical page design and major page elements.

1.1 Page headers

Page headers are like miniature versions of the home page that sit at top each page and do many of the things that home pages do,
but in a limited space. Headers provide site identity and global navigation, with search and perhaps other tools. Headers are the
most visible component of site identity.

Home link
Placing your organization or site logo in the upper left corner of the page—and linking that logo to the home page—
Global navigation
Headers are the most frequent location for global navigation links that span the site. The ideal arrangement is to use an HTML list
of links, styled with CSS to spread horizontally across a section of the header. This gives you:

 Usability: global links where users most expect to see them

 Semantic logic: the collection of global links should be marked up as a list, because, well, it is a list
 Accessibility: the list format of links appears early in the code listing, where it should be
 Search visibility: a collection of your major navigation keywords, linked and at the top of the code listing, is ideal for
search engine optimization

Tabs are another widely used, easily understood convention for global navigation. The best way to implement tabs is to style an
ordinary HTML list with a more elaborate CSS treatment to form the “tab” graphic around each link. Be sure you get the graphic
details right: the selected tab should be graphically unambiguous, and the remaining tabs should clearly be behind the selected tab.
This type of “you are here” marker is essential in orienting users within the site. Tabs can also be used to implement a two-tiered
navigation scheme, in which a secondary horizontal list of links appears under the selected tab, again as a simple HTML list
with CSS styling, to keep things semantic, accessible, and search visible (fig. .2).

Fig2 The canonical form of page headers is dominated by horizontal bands of links

Breadcrumb navigation
a breadcrumb trail is a navigation tool that allows a user to see where the current page is in relation to the
Web site's hierarchy. useful in large sites with deep levels of content .

Figure 3 — Locations for breadcrumb trails.

1.2 Search
All sites with more than few dozen pages should offer local site search. The upper right area of the header is a popular location for
search boxes, but a header search box must necessarily be simple to fit in this relatively small area (fig. 4).
Figure 4 — A header-based search box.

Scan columns
Subdividing the page field into functional regions is a fundamental characteristic of modern graphic design. Early in the web’s
history, designers began using narrow “scan” columns at the edge of the page to organize navigation links and other peripheral
page elements, much as scan columns have been used in print publications for a century or more. Research on web user
expectations now supports the common practice of locating navigational links—particularly section navigation—in the left
column.

Scan columns are also useful as locations for web search boxes, mailing address and contact information, and other more minor
but necessary page elements. Research shows that the left scan column under the local navigation links is the second place most
users will look for search features, after they look in the right header area (fig. 6.6).

Figure 6.6 — Beyond the superficial visual style variations, scan column designs have become remarkably consistent in major content and sales web
sites.

Left or right scan columns for navigation?

Extensive eye-tracking and user research says that it doesn’t really matter whether you use left or right navigation columns. Users
seem to do just fine either way, as long as you are consistent about where you put things. We favor the left column for navigation
simply because that is the most common practice.

Mailing address and contact information

Basic “real world” information about who the company responsible for the site is, where the company is, and how to contact the
company is often hard to find on otherwise well-designed sites. If you sell a product or service, don’t hide from your customers.
Display your contact information in a prominent location, such as the scan column, on every page.

Advertising and the scan columns

Our advice about ads in the scan column is the same as with header ads (above): beware! Users often ignore content that looks
like advertising when they see it in a scan column. Use formats that don’t scream “ADVERTISING!” Never make your scan
column content or navigation look anything like a typical banner ad, or users may never notice it.
1.3 The content area
Web content is so multifaceted that few general rules apply, but the following common practices make content areas easier to use:

 Page titles. Don’t bury the lead. Every page needs a visible name near the top. For all kinds of logical, editorial,
accessibility, search visibility, and common-sense reasons, use an <h1> heading at the top of the page to let users know
what the page is about.
 Breadcrumb navigation. The top of the content area is the most common location for breadcrumb navigation.
 Jump-to-top links. Jump links are a nice refinement for long pages. These links don’t need to be elaborate—just a top of
page link will do, but a small up-arrow icon offers good reinforcement.
 Rules. These elements can easily be overused and lead to a cluttered design. Use CSS to keep page rules as unobtrusive
as possible. When in doubt, skip rules and use a little white space to create visual content groupings or separations.
 Paging navigation. In multipage sequences it is convenient to have simple text links at the top and bottom of the page to
move the reader to the previous or next pages in the sequence. In longer sequences it is helpful to provide information
describing where they are in the series.
 Dates. Publication and update dates are useful for assessing the currency and relevance of content. In news and magazine
sites the publication date should appear at the top of the page. Other sites should display a last-updated date at the bottom
of the content area (fig. 6.7).

Figure 6.7 — Typical content-area components.

Page footers
Page footers are mostly about housekeeping and legal matters. These elements need to be on the page, but
place them somewhere out of the way:

 Page author or, in large enterprise sites, responsible party

 Copyright statement
 Contact details, especially email
 Links to related sites or to the larger enterprise
 Redundant navigation links, for long pages
: Page Templates
Always start your template work with an internal page, because the internal page template will dominate the site. The home page
is important, but the home page is inherently singular and has a unique role to play. Your internal page template will be used
hundreds or thousands of times across larger sites, and the navigation, user interface, and graphic design of the internal pages will
dominate the user’s experience of your site. Get your internal page design and navigation right, and then derive your home and
secondary page designs from the internal page template (fig. 6.8).

Figure 6.8 — A logical ordering for internal, menu, and home page designs.

Internal page templates

Internal page templates must accomplish these important functions:

 Global and local site navigation: make them logically consistent with the information architecture and structural
organization of your site
 Design framework: organize content consistently throughout the site
 Graphic tone: establish the look and feel of the site, ideally with a system dominated by consistent visual elements, but
with enough flexibility to create distinct regions within a large site

Types of internal pages

In larger sites containing a variety of content, your internal page template may be a set of templates that vary in details, such as the
number of columns, to accommodate the range of content and user interface needs (fig. 6.9).
Figure 6.9 — In larger sites the “template” is rarely a single layout and usually incorporates multiple variations to accommodate the full range of content
and applications required.

Sites that incorporate web applications, blog or wiki formats, or complex forms may need a simplified template variation that
strips away some of the usual site navigation elements. Applications, complex forms, large data tables, and many kinds of highly
graphic content (artwork, engineering drawings, repair manual graphics, and so on) usually require as much screen space as
possible (fig. 6.10).

Fig — Always include a stripped-down version of the template (left) for large graphics, large data tables, or complex web applications

Secondary page templates

Most sites are organized in a multitiered hierarchy, with vertical dimensions (home, secondary pages, internal pages) and a
horizontal spread of distinct content regions that graphically and organizationally help the reader navigate. Secondary page
templates should be closely related to the internal page template but must accommodate these additional functions:

 Establish a tiered hierarchy of header labels that sets the relationship of the secondary page to the home page and larger
enterprise site, as well as to the internal pages
 Provide a distinct look that identifies the secondary page as a special “sub-home page” and establishes a clear content
theme
Secondary page templates help create a concrete sense of the vertical dimension of sites and may perform varied functions in the
tiers between the home page and the internal content pages.

Navigation and submenu pages

Complex, multitiered sites usually need submenu pages to provide an organizing and navigational focal point for major
subsections or regions of the site. These submenu pages are effectively the home page for that block of content.

Alternate “front doors” or “landing pages”

Many marketing or communications campaigns that point to web sites require a focused, immediately recognizable page to bring
in visitors. These alternate entry points must bear a clear graphic and topical relation to the marketing graphics, featured product,
or communications theme, but because they also function as alternate home pages, they should orient visitors to the larger site
navigation as well (fig. 6.11).

Figure 6.11 — If you are featuring “Exhibitions” in your advertising, send visitors to a special submenu page that matches your ad campaign.

Department or program home pages

Large corporate or enterprise sites require secondary or even tertiary levels of pages that act as home pages for the local
department or program. In a multi-tiered site your template system should establish a clear hierarchy of page header labeling and
titles so that readers can see the relation of a department page to the larger enterprise (fig. 6.12).
Figure 6.12 — Department site templates should mirror the hierarchical structure of the departments in a carefully planned series of interrelated
templates.

The home page

Designing an effective home page can seem daunting, but if you’ve already thought through the fundamentals of your site
navigation and have done the hard work of creating internal and secondary page templates, you have a great head start. Designing
the home page layout last allows you to acknowledge the unique introductory role of the home page but places the design firmly
within the larger navigational interface and graphic context of the site.

Home pages have four primary elements:

 Identity
 Navigation
 Timeliness, or content focus
 Tools (search, directories)

Good home page designs always blend these four factors. How you blend them depends on the overall goals of your site, but most
good home pages do not balance all four elements equally. Home pages often have a distinctive theme in which one factor
dominates. Amazon’s home page is all about navigation to products. Yale University’s home page projects identity. The
Atlantic is dominated by timeliness and content. Google’s famously lean home page is all about tools. An effective home page
can’t be all things to all people. Decide what your priorities are, and build a home page that gives the user a clear sense of theme
and priority (fig. 6.13).

Figure 6.13 — Four home page variations for very different institutions and purposes. Home page designs should always reflect a particular design
strategy, depending on the nature and business intent of the web site.
Not all effective home pages have such singular emphasis. For example, Dartmouth College’s home page strongly projects both
identity and a lively sense of campus life. Navigation and tools aren’t neglected, but they play a secondary role in the overall page
impact (fig. 6.14).

Figure 6.14 — Dartmouth’s home design offers a good balance of identity, timeliness, navigation, and institutional identity.

Taglines
Too many sites project a strong brand image with logos and bold graphic design and then utterly fail to explain themselves to the
new user. Unless you own one of the world’s top one hundred brands, always put a brief explanatory comment, or tagline,
prominently on the home page, so users understand instantly what you do and what you have to offer them. Taglines should be
concise (“Alibris: 100 million items. 10,000 independent sellers. Your marketplace.”), but don’t use a vague company motto. “We
bring good things to life” is admirable but doesn’t explain a thing about what General Electric can do for you. Users looking for
content, services, or merchandise couldn’t care less about your department’s mission statement, so put that on your “about us”
page, not on the home page.

Kiva’s succinct service statement at the top of its home page is essential for a lesser-known brand and a novel service (fig. 6.15).

Figure 6.15 — The purpose of the Kiva site is not self-evident to new users, and the header tag line (“loans that change lives”) becomes a crucial
explanation.

So, let's proceed with the following procedure:

 Create a Master Pages Layout and ASP.NET web page

 Create CSS and jQuery menu bar

See the following screen “Home.aspx” layout:

Create a new project using "File" -> "New" -> "Project..." then select web "ASP.NET Web Forms Application".
Name it "MasterTemp".

Creating a Master Page

Go to Solution Explorer then right-click on your application then select "Add New Item" then select "Master
Page" and name it “Site.Master”.

The content page, that uses a Master Page is given below:

<%@  MasterLanguage="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="MasterTemp.Site1" %>
<!DOCTYPEhtml>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form2" runat="server">
    <div>
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
        </asp:ContentPlaceHolder>
    </div>
    </form>
</body>
</html>

Creating and using CSS in Master Page

Go to Solution Explorer then right-click on your application then select "Add New Item" then select "Style sheet"
and name it “Site.css”.
Implementation: Let's create an application to see the master page layout working. 

In the Site.css styles are the following: body, page, header, main, footer and topnav (Menu).

Site.css

body
{
   font-size: .80em;
   height: auto;
   width: 100%;
   font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
   margin: 0px;
   padding: 0px;
   background: #dde4e9;
}
 
a:hover
{
   color: Blue;
}
 
h1, h2, h3, h4, h5, h6
{
   font-size: 1.5em;
   color: #666666;
   font-variant: small-caps;
   text-transform: none;
   font-weight: 200;
   margin-bottom: 0px;
}
 
h1
{
   font-size: 1.6em;
   padding-bottom: 0px;
   margin-bottom: 0px;
}
 
h2
{
   font-size: 1.5em;
   font-weight: 600;
}
 
h3
{
   font-size: 1.2em;
}
 
h4
{
   font-size: 1.1em;
}
 
h5, h6
{
   font-size: 1em;
   color: White;
}
  
.page
{
   min-width: 1000px;
   max-width: 1024px;
   background-color: #FFFFFF;
   margin: 0pxauto0pxauto;
   border: 0pxsolid#496077;
}
  
.header
{
   position: relative;
   margin: 0px;
   padding: 0px;
   width: 100%;
   height: 100px;
   top: 0px;
   left: 0px;   
   border-top:5pxsolid#FF4500; 
   border-top-style:outset;
   background-image: -ms-linear-gradient(bottom,#FFFFFF0%,#F0EDED100%);
   background-image: -moz-linear-gradient(bottom,#FFFFFF0%,#F0EDED100%);
   background-image: -o-linear-gradient(bottom,#FFFFFF0%,#F0EDED100%);
   background-image: -webkit-gradient(linear,leftbottom,lefttop,color-stop(0,#FFFFFF),color-stop(1,#F0EDED));
   background-image: -webkit-linear-gradient(bottom,#FFFFFF0%,#F0EDED100%);
   background-image: linear-gradient(totop,#FFFFFF0%,#F0EDED100%);
}
 
.headerh1
{
   border-style: none;
   border-color: inherit;
   border-width: medium;
   font-weight:200;
   margin: 25px;
   padding: 0px0px0px20px;
   color:#007fff;
   line-height: 2em;
   font-size: 2em;
}
 
.title
{
   display: block;
   float: left;
   text-align: left;
   width: auto;
}
 
.main
{
   padding: 0px12px;
   margin: 8px8px8px8px;
   min-height: 500px;
   background-color: White;
}
  
.footer
{
   color: #EEE;
   padding: 0px0px0px0px;
   margin: 0pxauto;
   margin-top: 10px;
   height: 50px;
   text-align: center;
   line-height: normal;
   background-color: #007fff;
   background: #000000;  
} 
 
.clear
{
   clear: both;
   height: 1px;
}
 
.button
{
   display: inline-block;
   width: 100px;
   font-family: TimesNewRoman;
   font-weight: bold;
   font-size: 14px;
   text-align: center;
   padding: 5px;
   border: 0px#D7D7D7solid;
   text-align: center;
   text-decoration: none;
   color: White;
   margin: 5px;
   background-color: #001940;
   cursor: pointer;
}
 
.button:hover
{
   background: #000;
   text-decoration: none;
}
 
.button:active
{
   background: #001940;
}
 
.txt, .textarea
{
   padding: 8px;
   border: solid1px#E5E5E5;
   font: normal12pxVerdana, Tahoma, sans-serif;
   width: 200px;
   margin: 5px;
}
 
.left
{
   border-left: 0pxsolidred;
   border-right: 0pxsolidred;
   border-top: 0pxsolidred;
   float: left;
   width: 32%;
   margin-left: 10px;
   background-color: #F2F5F9;
   margin-bottom: 10px;
}
 
.font
{
   font-size: 11px;
   font-family: Verdana;
   color: #800000;
}
 
.text
{
   font-family: Verdana;
   font-size: 13px;
   font-variant: inherit;
   font-weight: normal;
   margin-bottom: 5px;
   color: #000000;
}
 
.accordion_headings
{
   padding: 5px;
   background: #33CCCC;
   color: #000000;
   -moz-box-shadow: 3px3px5px#535353;
   -webkit-box-shadow: 3px3px5px#535353;
   box-shadow: 3px3px5px#535353;
   -moz-border-radius: 6px6px6px6px;
   -webkit-border-radius: 6px;
   border-radius: 6px6px6px6px;
   border: 1pxsolid#3a2d00;
   cursor: pointer;
   font-weight: normal;
   height: 23px;
   margin-top: 1px;
   font-family: 'Copperplate Gothic Bold';
   font-size: 20px;
   font-style: normal;
}
 
p
{
   margin-top: -5px;
   margin-left: 25px;
   color: Yellow;
   font-size: 20px;
}
 
ul#topnav
{
   margin: 0;
   padding: 0;
   float: left;
   min-width: 1024px;
   max-width: 1024px;
   list-style: none;
   position: relative;
   font-size: 1.2em;
   background-color: #9fd2e5;
   background: #f0f0f0;
   font-family:'Times New Roman'; 
   font-variant:small-caps;
   text-transform: none;
   font-weight:900;
   margin-bottom: 0px;
}
 
ul#topnavli
{
   float: left;
   margin: 0;
   padding: 0;
}
 
ul#topnavlia
{
   padding: 10px15px;
   display: block;
   color:Blue;
   background: #f0f0f0;
   text-decoration: none;
}
ul#topnavlia:hover
{          
   background: #f0f0f0;
}
 
ul#topnavli:hover
{
   background: #1376c9repeat-x;  background: #f0f0f0;
}
 
ul#topnavlispan
{
   float: left;
   padding: 15px;
   margin-top: 5px;
   position: absolute;
   left: 0;
   top: 35px;
   display: none;
   width: 994px;
   color:black;
   background: #DDE4E9;
   -moz-border-radius-bottomright: 5px;
   -khtml-border-radius-bottomright: 5px;
   -webkit-border-bottom-right-radius: 5px;
   -moz-border-radius-bottomleft: 5px;
   -khtml-border-radius-bottomleft: 5px;
   -webkit-border-bottom-left-radius: 5px;
}
 
ul#topnavli:hoverspan
{
  display: block;  background: #DDE4E9;         
}
 
ul#topnavlispana
{
   display: inline;color:black;  background: #DDE4E9;
}
 
ul#topnavlispana:hover
{
   text-decoration: none;   color:red; background: #DDE4E9;
}

Now, the code behind file "Site.Master" uses the following code. I have also used the jQuery Menu bar and Content
Placeholder used.
Site.Master
<%@MasterLanguage="C#"AutoEventWireup="true"CodeBehind="Site.master.cs"Inherits="MasterTemp.Site"%>
<!DOCTYPEhtml>
<htmlxmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">
<title>
<asp:ContentPlaceHolderID="titleContent"runat="server"/>
</title>
<scriptsrc="Scripts/jquery.js"></script>
<linkhref="Styles/Site.css"rel="stylesheet"/>
<asp:ContentPlaceHolderID="head"runat="server">
</asp:ContentPlaceHolder>
<scripttype="text/javascript">
        $(document).ready(function () {
 
            $("ul#topnav li").hover(function () {
                $(this).css({ 'background': '#f0f0f0'});
                $(this).find("span").show();
            }, function () {
                $(this).css({'background': 'none' });
                $(this).find("span").hide();
            }); 
        });
</script>
</head>
<body>
<formid="form1"runat="server">
<divclass="page">
<divclass="header">
<divclass="title">
<h1>C# Sharp Corner
</h1>
</div>
</div>
<ulid="topnav">
<li><aid="A1"href="#"runat="server">Home</a></li>
<li>
<aid="A2"href="#"runat="server">About</a>
<span>
<aid="A3"href="#"runat="server">Sub Menu 1</a> |
<aid="A4"href="#"runat="server">Sub Menu 2</a> |
<aid="A5"href="#"runat="server">Sub Menu 3</a>
</span>
</li>
<li>
<aid="A6"href="#"runat="server">Services</a>
<span>
<aid="A7"href="#"runat="server">Sub Menu 1</a> |
<aid="A8"href="#"runat="server">Sub Menu 2</a> |
<aid="A9"href="#"runat="server">Sub Menu 3</a>
</span>
</li>
<li>
<aid="A10"href="#"runat="server">Portfolio</a>
<span>
<aid="A11"href="#"runat="server">Sub Menu 1</a> |
<aid="A12"href="#"runat="server">Sub Menu 2</a> |
<aid="A13"href="#"runat="server">Sub Menu 3</a> |
<aid="A14"href="#"runat="server">Sub Menu 1</a> |
<aid="A15"href="#"runat="server">Sub Menu 2</a> |
<aid="A17"href="#"runat="server">Sub Menu 3</a>
</span>
</li>
<li><aid="A16"href="#"runat="server">Contact</a></li>
</ul>
<divclass="main">
<asp:ContentPlaceHolderID="MainContent"runat="server">
</asp:ContentPlaceHolder>
</div>
<divclass="clear">
</div>
 
<divclass="footer">
<br/>

<asp:HyperLinkID="HyperLink1"runat="server"NavigateUrl="http://www.c-sharpcorner.com/"
Target="_blank"ForeColor="Orange"Style="text-decoration: none"> C# Corner </asp:HyperLink>
                All Rights Reserved.  
</div>
</div>
</form>
</body>
</html>

Now, go to Solution Explorer then right-click on your application then select "Add New Item" then select "Web
form using Master Page" and name it “Home.aspx”. Next add click.
Now, select a Master Page; just click "OK".

Now, in the code behind file "Home.aspx.cs" use the following code.

<
%@PageTitle=""Language="C#"MasterPageFile="~/Site.Master"AutoEventWireup="true"CodeBehind="Home.aspx.cs"
Inherits="MasterTemp.Home"%>
<asp:ContentID="Content1"ContentPlaceHolderID="titleContent"runat="server">Home
</asp:Content>
<asp:ContentID="Content2"ContentPlaceHolderID="head"runat="server">
</asp:Content>
<asp:ContentID="Content3"ContentPlaceHolderID="MainContent"runat="server">
</asp:Content>

Now run the page, it will look like this:

Design a master page in ASP.NET 4.5 using CSS and jQuery Menu bar menu/submenu. I hope you enjoyed this
article. If you have any other questions then please provide your comments below.

Once a master page has been defined it can be bound to new ASP.NET pages through the tick of a
checkbox. These ASP.NET pages - called content pages - include a Content control for each of the
master page's ContentPlaceHolder controls. When the content page is visited through a browser
the ASP.NET engine creates the master page's control hierarchy and injects the content page's
control hierarchy into the appropriate places. This combined control hierarchy is rendered and the
resulting HTML is returned to the end user's browser. Consequently, the content page emits both
the common markup defined in its master page outside of the ContentPlaceHolder controls and
the page-specific markup defined within its own Content controls. Figure 3 illustrates this concept.
Figure 03: The Requested Page's Markup is Fused into the Master Page
In this article I have explained 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.

Menu control
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
two MenuItemStylenodes. 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;
            }
        }
    }
}