Highlighting Menu Bar in ASP.NET Web Application

Question

I built a web application using ASP.NET Visual Studio 2010 with Master Pages. As you will see that the project gives us a default menu bar item. I have 5 pages (links) listed on those menu bars. Now when a user goes to a specific page I want to highlight that menu bar link. I dont know how to do that :(

I tried this on the Master Page Code Behind but it didnt work too:

 foreach (MenuItem item in NavigationMenu.Items)
        {
            var navigateUrlParams = item.NavigateUrl.Split('/');
            if (Request.Url.AbsoluteUri.IndexOf(navigateUrlParams[navigateUrlParams.Length - 1]) != -1)
            {
                item.Selected = true;
            }
        }

And in my mark up view I have this:

 <div class="clear hideSkiplink">
            <asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal"  OnMenuItemClick="NavigationMenu_MenuItemClick">
                <Items>
                    <asp:MenuItem Text="Test1"/>
                     <asp:MenuItem Text="Test2"/>
                     <asp:MenuItem  Text="Test3"/>

                </Items>
            </asp:Menu>
        </div>

So basically whenever user comes to Test1.aspx page, I want the menu item of Test1 to be highlighted. How should I do that?

Any help will be appreciated! Thank you...

Answer 1

Use CSS link classes to implement this:

http://www.w3schools.com/css/sel_active.asp

And unless you "need" to do something programmatic against these link items, use HTML anchor links instead. Create them as list items:

<ul class="menu">
    <li>
        <a href="~/Home" id="link1" title="First Link" runat="server">Link 1</a>
    </li>
</ul>

What I'm saying is to question if controls are necessary here (not familiar with your project), and to keep the markup simple whenever possible.