Highlight Selected Tab in ASP.Net Menu

Question

I am trying to hightlight with different color the selected tab in ASP.NET menu. It seems simple to do this but first I am not able to make it to work, and second I cannot find a good working example so far.

ASP/HTML

<div class="clear hideSkiplink">
                <asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="False"
                    IncludeStyleBlock="false" Orientation="Horizontal">

                    <Items>
                        <asp:MenuItem NavigateUrl="~/ReadMe.aspx" Text="Read Me" />
                        <asp:MenuItem NavigateUrl="~/Summary.aspx" Text="Summary" />
                        <asp:MenuItem NavigateUrl="~/Detail.aspx" Text="Detail" />
                    </Items>
                </asp:Menu>
  </div>

CSS

div.hideSkiplink
{
    background-color:#3a4f63;
    width:100%;
}

div.menu
{
    padding: 4px 0px 4px 8px;
}

div.menu ul
{
    list-style: none;
    margin: 0px;
    padding: 0px;
    width: auto;

}

div.menu ul li a, div.menu ul li a:visited
{
    background-color: #465c71;
    border: 1px #4e667d solid;
    color: #dde4ec;
    display: block;
    line-height: 1.35em;
    padding: 4px 20px;
    text-decoration: none;
    white-space: nowrap;
}

div.menu ul li a:hover
{
    background-color: #bfcbd6;
    color: #465c71;
    text-decoration: none;
}

div.menu ul li a:active
{
    background-color: #465c71;

    color: #cfdbe6;
    text-decoration: none;
}

Answer 1

This is a Working solution: *Script*

<script language="javascript" type="text/javascript">

   $(function () {
        // this will get the full URL at the address bar
        var url = window.location.href;

        // passes on every "a" tag 
        $("#cssmenu a").each(function () {
            // checks if its the same on the address bar
            if (url == (this.href)) {
                $(this).closest("li").addClass("active");
            }
        });
        $("#header a").each(function () {
            // checks if its the same on the address bar
            if (url == (this.href)) {
                $(this).closest("li").addClass("active");
            }
        });

    });
</script>

Markup

List items with div id ="cssmenu"

<div id='cssmenu'>
    <ul>
       <li><a href="../Admin/dashboard.aspx"><span>Dashboard</span></a></li>
       <li><a href="../Admin/Report.aspx"><span>Reports</span></a></li>
       <li><a href="../Admin/Shop.aspx"><span>Shop</span></a></li>
       <li><a href="../Admin/system.aspx"><span>System</span></a></li>
    </ul>
</div>

StyleSheet

#cssmenu ul {
    list-style-type: none;
    width: auto;
    position: relative;
    display: block;
    height: 33px;
    font-size: .6em;
    background: url(images/bg.png) repeat-x top left;
    font-family: Verdana,Helvetica,Arial,sans-serif;
    border: 1px solid #000;
    margin: 0;
    padding: 0;
}

#cssmenu li {
    display: block;
    float: left;
    margin: 0;
    padding: 0;
}

#cssmenu li a {
    float: left;
    color: #A79787;
    text-decoration: none;
    height: 24px;
    padding: 9px 15px 0;
    font-weight: normal;
}

#cssmenu li a:hover,
#cssmenu .active {
    color: #fff;
    background: url(images/bg.png) repeat-x top left;
    text-decoration: none;
}

#cssmenu .active a {
    color: #fff;
    font-weight: 700;
}

#cssmenu ul { background-color: #629600 }
#cssmenu li a:hover,
#cssmenu li.active { background-color: #7AB900 }

Answer 2

You need to set the Selected MenuItem Manually

NavigationMenu.Items(i).Selected = True

I've created a function to make highlighting easier.

SelectMenuByValue("Value2", NavigationMenu)

It takes the Value of the MenuItem and the Menu control instance as Parameters.

<asp:Menu ID="NavigationMenu" runat="server">
<Items>
    <asp:MenuItem Text="Parent1" Value="ParentValue">
        <asp:MenuItem Text="SubMenu1" Value="Value1" NavigateUrl="~/Page1.aspx" />
        <asp:MenuItem Text="SubMenu2" Value="Value2" NavigateUrl="~/Page2.aspx" />
        <asp:MenuItem Text="SubMenu3" Value="Value3" NavigateUrl="~/Page3.aspx" />
    </asp:MenuItem>
</Items>

Code behind:

Public Sub SelectMenuByValue(ByVal sValue As String, ByVal NavigationMenu As Menu)
Dim iMenuCount As Integer = NavigationMenu.Items.Count - 1
For i As Integer = 0 To iMenuCount
    Dim menuItem As MenuItem = NavigationMenu.Items(i)
    If menuItem.Value = sValue Then
        If menuItem.Enabled AndAlso menuItem.Selectable Then menuItem.Selected = True
        Exit For
    End If
    If CheckSelectSubMenu(menuItem, sValue) Then Exit For
Next
End Sub

Private Function CheckSelectSubMenu(ByVal menuItem As MenuItem, ByVal sValue As String) As Boolean
    CheckSelectSubMenu = False
    Dim iMenuCount As Integer = menuItem.ChildItems.Count - 1
    For i As Integer = 0 To iMenuCount
        Dim subMenuItem As MenuItem = menuItem.ChildItems(i)
        If subMenuItem.Value = sValue Then
            CheckSelectSubMenu = True
            If subMenuItem.Enabled AndAlso subMenuItem.Selectable Then subMenuItem.Selected = True
            Exit For
        End If
        If CheckSelectSubMenu(subMenuItem, sValue) Then
            CheckSelectSubMenu = True
            Exit For
        End If
    Next
End Function

reference: from the forum ASP.NET 4 : Highlight menu item for current page

Answer 3

This answer to ASP.NET: Highlight menu item of current page should provide the solution you're after.

Basically, you'll need to use the Menu.StaticSelectedStyle Property. There's an example in the answer link above and in the documentation.

Example Snippet

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

        [...]
</asp:menu>

Also, you will need to remove the menu attribute IncludeStyleBlock="false" as it " indicates whether ASP.NET should render a block of cascading style sheet (CSS) definitions for the styles that are used in the menu."

Other helpful links:

• asp:MenuItem / CSS
• StaticMenuItemStyle vs. StaticSelectedStyle - Does one overwrite the other?