Hello!

I've tackled a similar situation on the site I'm working on now. I have a site-wide menu at the top of every page, and the menu needs to highlight the current page. For me, this amounts to putting a different css class on the menu link. For you, it sounds like you'll need to use a different image.

The approach I took was to create a user control for the menu. The user control contains a SiteMapDataSource and a Repeater control bound to it. The Repeater's ItemTemplate contains nothing more than a HyperLink control whose properties are bound to the properties of the SiteMap nodes that are returned by the SiteMapDataSource.

<asp:SiteMapDataSource ID="menuSiteMapDataSource" runat="server" ShowStartingNode="false" StartFromCurrentNode="false" StartingNodeOffset="0" />
<asp:Repeater ID="menuLinks" runat="server" DataSourceID="menuSiteMapDataSource">
	<ItemTemplate>
		<asp:HyperLink ID="menuLink" runat="server" NavigateUrl='<%# Eval("Url") %>' Text='<%# Eval("Title") %>' CssClass='<%# GetMenuLinkCssClass((SiteMapNode)Container.DataItem) %>'></asp:HyperLink>
	</ItemTemplate>
</asp:Repeater>

 Note, however, that the CssClass on the HyperLink control is bound to a method call, GetMenuLinkCssClass. This method's job is to determine if the SiteMapNode whose link is currently being built represents the page that is currently being displayed. The method takes a SiteMapNode as its only argument. You can see in the code above that I'm casting the data item that's being bound as a SiteMapNode and passing it into the method.

The GetMenuLinkCssClass method is pretty simple:

protected string GetMenuLinkCssClass(SiteMapNode node)
{
	if (SiteMap.CurrentNode.Equals(node) || SiteMap.CurrentNode.IsDescendantOf(node))
		return "current";
	else
		return "";
}

 It uses the SiteMap api's CurrentNode property (which is a SiteMapNode representing the current page) and compares it with the SiteMapNode that was passed in as a parameter (which represents the current SiteMapNode being used to create a Hyperlink in the menu). If the CurrentNode is equal to the node that is being built in the menu or the CurrentNode is a descendant of the node being built in the menu, the method returns "current", which is the name of the CSS class that is used for the current menu item. Otherwise, it returns an empty string.

I'm thinking that you might be able to employ the same techniques to build a single user control to use for your menu, rather than using a different user control for each page.

Hope that helps!

Hi Netapostle,

thanks for your suggestions. I think your solution would work great for text/css-based navigation but I am not sure if it would help in my situation with graphical link items, as I have two images for each link (one active, and one inactive). To complicate things further each link item may be related to multiple pages, ie the "Shop" link item will remain active for all pages related to shopping (it is a major header).
 

Hello,

I think your situation would be a bit more difficult than mine, but you could probably make it work. Instead of having a method that returns to you a css class, you could have a method that returns to you the url of the image that should be shown. You could keep a collection of active image paths and inactive image paths in the codebehind for the user control. That way the images are configured in only one place.

All of the assumes, though, that you're using a SiteMap of some sort. If you are, then the SiteMapNode.IsDescendantOf method is very useful to determine if the node for the current page is a child (or grandchild or great-grandchild, etc) of another. Using this method will allow you to determine if your on a page in the shopping section, and if so, to show the active shopping menu item graphic instead of the inactive one.

The code example I put in my earlier post did just that. It checks to see if the current page's SiteMapNode is a descendant of the menu node that's currently being built. If so, it returns "current." In this way, the top-level menu item is highlighted on both the top-level page for that menu item and all pages in that section.

Anyway, I hope you are able to make a go of it!

netapostle

hi netapostle.

that makes sense. i'll give it a go.

thanks
 

netapostle,

i rolled a solution using your suggestion. it works great.

thanks for the fresh outlook on the problem. the beauty of this is now i can also use the sitemap for my breadcrumb navigation.

cheers

 

Thank you netapostle! This is exactly what I've been searching for!

-image