CSS for Current Page with asp:Menu Control

**sford** · April 13th, 2011, 08:34 PM

I would like to structure a menu bar in ASP.NET using the asp:Menu control and master pages.

The feature I am having trouble implementing is to have the menu item for the "current page" display in a style that is distinctive from all of the other menu items.

I have seen a few solutions for this that suggest something like this...

Put a unige ID or Class attribute on the <body> tag of each page referenced in the menu. e.g. <body ID="Home"...> <body ID="Contact"...> etc.
Put a unique ID on each <a> tag in the menu (or a class attribute on the <li> tag). e.g.
<ul id="navbar">
<li><a id="home_link" href="home.htm">HOME</a></li>
<li><a id="contact_link" href="contact.htm">CONTACT</a></li>
</ul>
Create the following CSS...
body#home a#home_link,
body#contact a#contact_link
{ color: #000; background: #fff; } /* or whatever unique attributes are desired */

I have two problems with implementing this...

Since the <body> tag is in the Master page I don't know how to set a unique ID on the <body> tag for each page.
Both the <li> and <a> tags are generated from the asp.MenuItem so I don't see how to apply either an ID or a Class attribute.

If necessary I could forgo using the asp:menu control and just use simple HTML, but I would prefer to use the asp:menu control if that is possible. Even if I do resort to simple HTML (i.e. <ul> <li> <a> etc) for that part of the puzzle, I would really like to continue using a Master page.

This seems like a VERY common way to configure a menu so I am assuming there must be some sort of solution.

Any help will be greatly appreciated!!!

Thanks,
Steve

**RedBully** · April 15th, 2011, 05:51 AM

Here is some sample code that works and should give you an idea of how to acheive what you want.

We have an Aspx page with a menu called MainMenu. We set two styles on it for menu items and selected menu items.

Code:

<&#37;@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="TestWebApplication._Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
    <link href="Stylesheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Menu ID="MainMenu"
                  runat="server"
                  StaticSelectedStyle-CssClass="selected_menu_item"
                  StaticMenuItemStyle-CssClass"menu_item" />
    </div>
    </form>
</body>
</html>

On page load in the code behind we build our menu and store an Identifer for each page in the menu item values. We then compare those item values with the name of the page we are currently on to work out which menu item we want to look differently. We then set the selected property on that menu item.

Code:

using System;
using System.Web.UI.WebControls;

namespace TestWebApplication
{
    public partial class _Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            //Create menu items as store the path/name for each
            MainMenu.Items.Add(new MenuItem("Page 1", "~/Page1.aspx"));
            MainMenu.Items.Add(new MenuItem("Page 2", "~/Page2.aspx"));
            MainMenu.Items.Add(new MenuItem("Page 3", "~/Page3.aspx"));

            //Work out what page we are viewing
            string pageViewed = this.Page.AppRelativeVirtualPath;

            //Go through each menu item and work out which one we want to
            //select
            foreach (MenuItem item in MainMenu.Items)
            {
                if (pageViewed == item.Value)
                {
                    item.Selected = true;
                }
            }
        }
    }
}

Finally, we need a stylesheet.

Code:

.menu_item
{
	font-weight: normal;
}
.selected_menu_item
{
	font-weight: bold;
}

In this example, I have stored the actual page names but I normally use an enumerator and a lookup to a list of page names to make it easier to decouple the naming of the actual pages with the code for setting the menu items.

**sford** · April 17th, 2011, 01:40 PM

Thanks RedBully!!!

I will give it a try... I appreciate your response!!!!

Thread: CSS for Current Page with asp:Menu Control

Thread Tools

Display

CSS for Current Page with asp:Menu Control

Re: CSS for Current Page with asp:Menu Control

Re: CSS for Current Page with asp:Menu Control

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions