Highlight parent menu when child menu is selected in Asp.net.


To highlight the parent menu we need to first find out the selected menu item and then find the top most parent of the selected item. Make the top most parent of the selected menu item selected and apply the selected css. Below is the code implementation.

<asp:Menu ID="Menu1" runat="server" Orientation="Horizontal"  
    BorderStyle="None" 
    StaticEnableDefaultPopOutImage="False"   
    StaticHoverStyle-BackColor="#FFFFFF" 
    StaticHoverStyle-ForeColor="#CC0000" 
    StaticHoverStyle-Font-Names="Arial"
    StaticHoverStyle-Height="16px"
    StaticPopOutImageUrl="~/app_themes/Images/seperator.jpg"
    
    StaticMenuItemStyle-BackColor="#008080"
    StaticMenuItemStyle-ForeColor="#FFFFFF"
    StaticMenuItemStyle-Font-Names="Arial"    
    StaticMenuItemStyle-Font-size="13px" 
    StaticMenuItemStyle-Font-Bold="true"
    StaticMenuItemStyle-HorizontalPadding="20px" 
    StaticMenuItemStyle-VerticalPadding="5px"
    StaticMenuItemStyle-Height="11px"  
  
    DynamicMenuItemStyle-DisappearAfter="6"
    DynamicMenuItemStyle-Font-size="12px" 
    DynamicMenuItemStyle-Font-Bold="true"
    DynamicMenuItemStyle-HorizontalPadding="19px"
    DynamicMenuItemStyle-VerticalPadding="5px"
    DynamicMenuItemStyle-BackColor="#CC0000"
    DynamicMenuItemStyle-Font-Names="Arial" 
    DynamicMenuItemStyle-ForeColor="#FFFFFF" 
    DynamicMenuItemStyle-Height="18.5px" 
    DynamicMenuItemStyle-Width="185px"
    DynamicHoverStyle-BackColor="#AE0000"></asp:Menu>


Add CSS part to your page

<style>
.popout {
    background-color: #008080;
    Color: #FFFFFF;
    font-family: Arial;
    Font-size: 13px;
    font-weight: bold;
    padding-left: 20px;
    padding-top: 5px;
    Height: 11px;
}

.level1 {
    background-color: #008080;
    Color: #FFFFFF;
    font-family: Arial;
    Font-size: 13px;
    font-weight: bold;
    padding-left: 20px;
    padding-top: 5px;
    Height: 11px;
}

.selected {
    background-color: #FFFFFF !important;
    Color: #CC0000 !important;
    font-family: Arial !important;
    Height: 16px !important;
}
</style>


Write the below line of code after binding the Menu Control in Asp.net.
In this code current page url will match with Menu url. “APPLICATION_NAME” is the name of your Application.

foreach (MenuItem MenuItem in Menu1.Items)
{
    if (MenuItem.NavigateUrl.ToUpper() == Request.Url.PathAndQuery.ToUpper().Replace("/APPLICATION_NAME", "~"))
    {
        MenuItem.Selectable = true;
        MenuItem.Selected = true;
        break;
    }
    else
    {
        if (FindRecursiveChild(MenuItem) == true)
        {
            break;
        }
    }
}


If the menu has multilevel items. FindRecursiveChild method is used to find child item. FindRecursiveParent method is used to find top most parent of the selected menuitem.

public bool FindRecursiveChild(MenuItem ChildMenuitem)
{
    bool flag = false;
    foreach (MenuItem MenuItem1 in ChildMenuitem.ChildItems)
    {
        if (MenuItem1.NavigateUrl.ToUpper() == Request.Url.PathAndQuery.ToUpper().Replace("/APPLICATION_NAME", "~"))
        {
            FindRecursiveParent(MenuItem1);
            flag = true;
            break;
        }
        else
        {
            foreach (MenuItem ChildItem in MenuItem1.ChildItems)
            {
                FindRecursiveChild(ChildItem);
            }
            flag = false;
        }
    }
    return flag;
}

public void FindRecursiveParent(MenuItem ChildMenuitem)
{
    if (ChildMenuitem.Parent == null)
    {
        ChildMenuitem.Selectable = true;
        ChildMenuitem.Selected = true;
    }
    else
    {
        FindRecursiveParent(ChildMenuitem.Parent);
    }
}