Menu Control Selected Item Color Change Depending on Selection

• Download demo - 8.09 KB

This is my first article about Menu Control Selected Item Color change depending on selection. In some cases, the Menu control will not work in browsers. We will try to solve that issue also. If there are any mistakes in this document, I apologize. All suggestions are welcome. Let's start the work.  

Introduction

This article will help you to use a simple menu control with sitemap path and the use of control adapters without using any background code. In this article, we will see how to change the selected color of the menu item. Hope you enjoy this article. Please provide your valuable suggestions and feedback.

Menu Control

The ASP.NET Menu control allows you to develop both statically and dynamically displayed menus for your ASP.NET Web pages. You can configure the contents of the Menu control directly in the control, or you can specify the contents by binding the control to a data source. Without writing any code, you can control the appearance, orientation, and content of an ASP.NET Menu control. In addition to the visual properties exposed by the control, the control supports ASP.NET control skins and themes.

Web.sitemap File

To use ASP.NET site navigation, you must describe the structure of the site so that the site navigation API and the site navigation controls can expose the site structure properly. By default, the site navigation system uses an XML file that contains the site hierarchy. However, you can also configure the site navigation system to use alternative data sources. The simplest way to create a site map is to create an XML file named Web.sitemap that organizes the pages in the site hierarchically. This site map is automatically picked up by the default site-map provider for ASP.NET.

SiteMap PathControl/ Breadcrumb

The ASP.NET 2.0 SiteMapPath control displays a navigation path, which allows users to understand their current location on a Web site. It essentially provides "You are here" functionality. This type of navigation element is often called a breadcrumb. The basic presentation shows the user the current page location and displays links as a path back to the home page.

ASP.NET Browser Registration Tool/.Browser File

The ASP.NET Browser Registration tool parses and compiles all system-wide browser definitions into an assembly and installs the assembly into the global assembly cache. The tool uses the browser definition files (.BROWSER files) from the .NET Framework .Browsers subdirectory. The tool can be found in the %SystemRoot%\Microsoft.NET\Framework\version\ directory.You add information on a new browser by adding a new .BROWSER file to the folder located at %SystemRoot%\Microsoft.NET\Framework\version\CONFIG\Browsers on your system. Because an application is not reading a .config file every time it requires browser information, you can create a new .BROWSER file and run Aspnet_regbrowsers.exe to add the required changes to the assembly. This allows the server to access the new browser information immediately so you do not have to shut down any of your applications to pick up the information. An application can access browser capabilities through the Browser property of the current HttpRequest.

Using the Code

• Launch Visual Studio by  
• Start --> Run-->DEVENV
  • File-->New Website-->
    • Location: Http; Language: C#
      • Name: http://localhost/MenuDemo
      • Ok

For demo, add 1 Master Page and 5 Content Pages. Select the Master Pages to Content Pages. Give your names. I gave them as:  

1. Default.aspx
2. SecondPage.aspx
3. ThirdPage.aspx
4. FourthPage.aspx
5. MasterPage.master
6. SecondPageSubPage.aspx

In the Master Page, add the following HTML:

<div id="topNavigation" align="center">
    <asp:Menu ID="topMenu" runat="server" DataSourceID="topMenuData"
        MaximumDynamicDisplayLevels="0" Orientation="Horizontal">
        <StaticMenuItemStyle CssClass="staticMenuItemStyle" />
        <StaticSelectedStyle CssClass="staticSelectedStyle" />
        <StaticHoverStyle CssClass="staticHoverStyle" />
    </asp:Menu></div>

<div class="subNavigation" align="left" >
<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server"
        ShowStartingNode="false" StartingNodeOffset="0" />    
    <asp:Menu ID="subMenu" runat="server" DataSourceID="subMenuData"
        Orientation="Horizontal">
        <StaticMenuItemStyle CssClass="substaticMenuItemStyle" />
        <StaticHoverStyle CssClass="substaticHoverStyle" />
    </asp:Menu>
</div> 

In the Above HTML, We Need to Explore a Few Things

1. If MaximumDynamicDisplayLevels is set to 0, no menu nodes will be dynamically displayed. If the MaximumDynamicDisplayLevels is set to a negative number, an exception is thrown.
2. The Orientation can be set to Vertical/Horizontal. I used Horizontal.
3. StartingNodeProperty Gets or sets a value indicating whether the starting node is retrieved and displayed. The ShowStartingNode property is evaluated during calls to the GetView and GetHierarchicalView methods, when the node tree that is returned by these methods is populated.
4. SiteMapDataSource.StartingNodeOffset Property Gets or sets a positive or negative integer offset from the starting node that determines the root hierarchy that is exposed by the data source control.

• Add New ASP.NET Folder-->Theme
  • Select Theme1 from Solution Explorer
    • add new item Style Sheet
      • Add.<--

Design the Style Sheet as per your requirement.

Below is the CSS code block:

// Main CSS and Heading Section
.Main1
{
    background-color: #66FF99;
}
.h1
{
    background-color: #99FFCC;
    color: #009900;
}

//Navigation Section
 #topNavigation
{
    width: 100%;
    background-color: #99FF33;
    vertical-align: bottom;
    padding: 0;
    margin: 0;
    z-index: 0;
    height: 30px;
}
  
   #subNavigation
{
    width: 100%;
    border-left: solid 1px #000;
    border-bottom: solid 1px #000;
    border-right: solid 1px #000;
    padding: 0;
    margin: 0;
    height: 30px;
    background-color: #009900;
    color: #66FF66;
}  

//Style CSS
    .staticMenuItemStyle
{
    width: 89px;
    background-color: #009900;
    border: solid 1px #000;
    color: #CCFF33;
    text-align: center;
    height: 30px;
}
    .staticSelectedStyle
{
    background-color: #CCFF33;
    color: #003300;
    border-bottom: solid 1px #eee;
    z-index: 100;
}
    .staticHoverStyle
{
    background-color: #00CC66;
}
   
    .substaticMenuItemStyle
{
    width: 89px;
    background-color: #009933;
    text-align: center;
    color: #66FF33;
}
    .substaticHoverStyle
{
    background-color: #99FF99;
    border: solid 1px #A68F8F;
    color: #009900;
}

In the Above CSS, We Need to Explore a Few Things

1. StaticMenuItemStyle is the Style of the item which is not selected
2. StaticSelectedStyle is the Style of the item which is selected
3. StaticHoverStyle is the hover Style of the item

• Add New Item
  • -->SiteMap
    • --> Ok<--

Give the Navigations in the Sitemap. For more information on sitemap, see this link. Now configure the sitemap as shown below:

<sitemap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0">
<sitemapnode title="Main">     
<sitemapnode title="HomePage" description="Redirects To HomePage" url="Default.aspx">
       
        <?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
    <siteMapNode url="" title="Main"  description="">
      <siteMapNode url="Default.aspx" title="HomePage" 
            description="Redirects To HomePage" />
        <siteMapNode url="SecondPage.aspx" title="SecondPage" 
            description="Redirects To SecondPage" >
          <siteMapNode url="SecondPageSubPage.aspx" title="SecondPageSubPage"
              description="Redirects To SecondPage SubMenu" />
        </siteMapNode>
       <siteMapNode url="ThirdPage.aspx" title="ThirdPage" 
           description="Redirects To ThirdPage" />
       <siteMapNode url="FourthPage.aspx" title="FourthPage" 
           description="Redirects To FourthPage" />
           </siteMapNode>
</siteMap>

<sitemapnode title="SecondPage" description="Redirects To SecondPage"
    url="SecondPage.aspx"> 
</sitemapnode> 
</sitemapnode> 
</sitemapnode> 
</sitemap>

In the Above SiteMap, We Need to Explore a Few Things

The title attribute defines the text that is usually used as link text, and the description attribute acts both as documentation and as a tool tip in the SiteMapPath control. The rendering of the control will not support for Google chrome, i.e. as per my observation. So we can overcome the problem by adding .browser file.

• Add new item
  • -->Browser File-->
    • Add<--

It will add the .Browser file in AppBrowser folder:

Copy the code as shown below:

<!--
    You can find existing browser definitions at
    <windir>\Microsoft.NET\Framework\<ver>\CONFIG\Browsers
-->
<browsers>
	<!----><browser refID="safari1plus">
		<!----><controlAdapters>
			<adapter controlType="System.Web.UI.WebControls.Menu"
                               adapterType="" />
		</controlAdapters>
	</browser>
</browsers>

This concludes our sample. Now you can test it yourself.

History

This is the first version.