ASP.NET: Highlight menu item of current page

Question

I've been trying to find an easy way of highlighting the current selected menu item of an asp.net menu (so the user knows which page they are on), but no matter what I have tried I can't get it to work. In my markup I have:

<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal" StaticSelectedStyle-ForeColor="#99CCFF" DynamicSelectedStyle-ForeColor="#99CCFF">
    <Items>
        <asp:MenuItem NavigateUrl="~/Default.aspx" Text="Operations"/>
        <asp:MenuItem NavigateUrl="~/Analysis.aspx" Text="Analysis"/>
        <asp:MenuItem NavigateUrl="~/Dashboard.aspx" Text="Dashboard"/>
        <asp:MenuItem NavigateUrl="~/Flashboard.aspx" Text="Flashboard"/>
        <asp:MenuItem NavigateUrl="~/Spacequest.aspx" Text="SQ OBP"/>
    </Items>
</asp:Menu>

And in the server side Page_Load function:

((Menu)Master.FindControl("NavigationMenu")).Items[0].Selected = true;

But this does not work. I tried using a sitemap (even though a sitemap is not what I want to use) and that hasn't worked either. Any ideas?

Kicker

Answer 1

There's a StaticSelectedStyle property that you can use inside your menu.

<asp:menu [...]>
        <staticselectedstyle backcolor="LightBlue"
          borderstyle="Solid"
          bordercolor="Black"
          borderwidth="1"/>

        [...]
</asp:menu>

See here for more info.

Also, if there's a class applied to the selected item (which i'm not sure if there is but it would be handy) you can simply hook into that with your CSS. This would be a much nicer way than using the StaticSelectedStyle property.

UPDATE

It's worth noting also that your use of IncludeStyleBlock="false" will stop your menu from generating the CSS necessary to control the selected item.

With the style block turned off, you have to provide your own styles and the auto-generated styles of the menu will not be used.

From MSDN:

If you set this property to false, you cannot set style properties. For example, you cannot add a DynamicHoverStyle-ForeColor attribute in markup or set the DynamicHoverStyle.ForeColor property in code.

Source: http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.menu.includestyleblock.aspx

Hijack

I'm already using that property (see my markup in the menu tag). It doesn't seem to work.I'm at a loss. – Kicker

Have you tred it the way I'm sugesting here? It's slightly different to how you've done it inline on the menu tag. – Hijack

That doesn't seem to work either. Am I missing something here? – Kicker

See my update also. You have IncludeStyleBlock="false" which will stop the menu from generating the necessary CSS blocks for the selected item . – Hijack

I'll be damned, that was the problem. Thanks a bunch. – Kicker

Answer 2

I think you'll have to loop through the menu items and see if the current page URL contains the NavigateUrl of the menu item.

foreach (MenuItem item in mn.Items)
{
   if (Request.Url.AbsoluteUri.ToLower().Contains(Page.ResolveUrl(item.NavigateUrl.ToLower()))
   {
      item.Selected = true;
   }
}

Brume

I have ~/ in front of my pages, so I tweaked it, but this worked for me when the others didnt: Request.Url.AbsoluteUri.ToLower().Contains(Page.ResolveUrl(item.NavigateUrl.ToLower())) – Tyronetyrosinase

Glad to hear it man. I like your code example, because it will work in all scenarios. I'm going to update my answer, and appreciate the suggestion. – Brume

Answer 3

I would use jQuery in this instance.

For the specified page, so for example on the Analysis.aspx page, add this bit of jquery to your page.

$('#MenuItemID').addClass('active');

Can you specify the ID of the menu items?

Such as:

<asp:MenuItem ID="AnalysisMenuItem" NavigateUrl="~/Analysis.aspx" Text="Analysis"/>

You would then use this:

$('#' + <% AnalysisMenuItem.ClientID %>').addClass('active');

then of course just define what active is in your css:

.active { background-color: #FFF; }

Dicephalous

I tried but the property ID in asp:MenuItem doesn't exist – Irairacund

Answer 4

If you are thinking to make it dynamically, then this is the better way:

Menu MyMenu = new Menu();
....
MyMenu.MenuItemDataBound += new MenuEventHandler(MyMenu_MenuItemDataBound);
TheMenu.StaticSelectedStyle.CssClass ="MySelectedClass";

    protected void MyMenu_MenuItemDataBound(Object sender, MenuEventArgs e)
    {
        if (e.Item.NavigateUrl.ToLower().Contains(Path.GetFileName(Request.FilePath).ToLower()))
        {
            //e.Item.Text = "<div style='color: Yellow'>" + e.Item.Text + " </div>";
            e.Item.Selected = true;
        }
    }

add then simply add .MySelectedClass style to your Css file ..

Trip

Answer 5

//Master
    <asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" 
            EnableViewState="False" Orientation="Horizontal"
            BackColor="#465C71" DynamicHorizontalOffset="2"      
            ForeColor="#DDE4EC">
          <StaticMenuItemStyle HorizontalPadding="15px" VerticalPadding="2px" />
          <StaticSelectedStyle BackColor="#FFFFFF" ForeColor="#000000"/>
        <Items>
            <asp:MenuItem NavigateUrl="~/Secure/About.aspx" Text="About"/>
            <asp:MenuItem  NavigateUrl="~/Secure/Login.aspx"  Text="Login"/>
        </Items>
    </asp:Menu>


//Master.cs
foreach (MenuItem item in ((Menu)this.FindControl("NavigationMenu")).Items)    
{
    if(Request.Url.AbsoluteUri.ToLower().Contains(item.NavigateUrl.ToLower().Substring(1)))
    {
        item.Selected = true;
    }
}

//item.NavigateUrl.ToLower() contains "~". So, find substring and check.

Kiger