Question

I have two ASP.NET Menu controls on a page.

One in my header (tabs) for top level pages, e.g. ~/Default.aspx

And one in my sidebar for sub pages, e.g. ~/Products/SomeProduct.aspx

I’m using the selected CSS class to ensure that the selected tab is a different colour.

Works fine for top level pages, but if I view a sub page, the tab isn’t assigned a CSS class of selected.

How can I ensure that the top level menu item has a CSS class of selected when viewing a sub page?

Answer 1

Figured it out with help of related question:

Set item.selected in ASP.NET Menu Control

protected void Page_Load(object sender, EventArgs e)
{
    MenuControl.MenuItemDataBound += new MenuEventHandler(MenuControl_MenuItemDataBound);
}

void MenuControl_MenuItemDataBound(object sender, MenuEventArgs e)
{
    if (SiteMap.CurrentNode != null)
    {
        if (SiteMap.CurrentNode.ParentNode.Url == e.Item.NavigateUrl)
        {
            e.Item.Selected = true;
        }
    }
 }