CSS for Current Page with asp:Menu Control
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
Re: CSS for Current Page with asp:Menu Control
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:
<%@ 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.
Re: CSS for Current Page with asp:Menu Control
Thanks RedBully!!!
I will give it a try... I appreciate your response!!!!
Re: CSS for Current Page with asp:Menu Control
Quote:
Originally Posted by
sford
Thanks RedBully!!!
I will give it a try... I appreciate your response!!!!
Did this solution work for you?
Re: CSS for Current Page with asp:Menu Control
This thread is over two(2) years old and the user has not been active for over a year... I doubt he will reply on whether it worked for him or not...
If you have a similar problem, try the proposed fix, and if it does not work as expected, start a new thread with your problem and question and someone will try help you....
thanks...
Re: CSS for Current Page with asp:Menu Control
I had tried the proposed solution, hence why I asked if it worked for them as it did not for me.
This is what worked for me. :)
CSS
Code:
.menu a.static.selected
{
background-color: #680840 !important;
color: #FFF !important;
text-decoration: none !important;
}
Code behind in Site.Master
Code:
protected void Page_Load(object sender, EventArgs e)
{
string path = Request.AppRelativeCurrentExecutionFilePath;
foreach (MenuItem item in NavigationMenu.Items)
{
item.Selected = item.NavigateUrl.Equals(path, StringComparison.InvariantCultureIgnoreCase);
}
}
Re: CSS for Current Page with asp:Menu Control
:thumb: thanks for the alternate solution.. and confirmation of it....
