Highlight the selected menuitem of MasterPage

Question

I have a Menu on MasterPage that i use to transverse to pages. I would like to highlight selected menuitem when page selected. I have tried the following without success?

Private Sub Menu1_MenuItemClick(sender As Object, e As MenuEventArgs) Handles Menu1.MenuItemClick

    Select Case (e.Item.Value)
        Case "Inbox"
            e.Item.Selected = True
            Response.Redirect("~/Messaging/Inbox.aspx")


        Case "Compose"
            e.Item.Selected = True
            Response.Redirect("~/Messaging/Compose.aspx")



    End Select

End Sub

<asp:Menu ID="Menu1" runat="server" Orientation="Horizontal"
>
<LevelMenuItemStyles>
<asp:MenuItemStyle CssClass="main_menu" />
<asp:MenuItemStyle CssClass="level_menu" />
</LevelMenuItemStyles>
<StaticSelectedStyle CssClass="selected" />

            <Items>


                   <asp:MenuItem Text="Inbox" Value="Inbox"  ></asp:MenuItem>
                    <asp:MenuItem Text="FileClean" Value="FileClean"  ></asp:MenuItem>
                    <asp:MenuItem  Text="Compose" Value="Compose"   ></asp:MenuItem>

            </Items>

    </asp:Menu>

Answer 1

Hi @peter liles ,
As far as I think,you don't need to use the MenuItemClick. You only need to add css class for your menu item.
I have tested your codes and you could refer to below this. Of course, you could change the style by yourself design.

 <style>  
        .main_menu:hover {  
            background-color: red;  
        }  
    </style>  
 <asp:Menu ID="Menu2" runat="server" Orientation="Horizontal">  
                <LevelMenuItemStyles>  
                    <asp:MenuItemStyle CssClass="main_menu" />  
                    <asp:MenuItemStyle CssClass="level_menu" />  
                </LevelMenuItemStyles>  
                <StaticSelectedStyle CssClass="selected" />  
                <Items>  
                    <asp:MenuItem Text="Inbox" Value="Inbox" NavigateUrl="~/WebForm1.aspx"></asp:MenuItem>  
                    <asp:MenuItem Text="FileClean" Value="FileClean" NavigateUrl="~/WebForm1.aspx"></asp:MenuItem>  
                    <asp:MenuItem Text="Compose" Value="Compose" NavigateUrl="~/WebForm1.aspx"></asp:MenuItem>  
                </Items>  
            </asp:Menu>  

Best regards,
Yijing Sun

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Answer 2

Your CSS will only show temp Hover effect. It is not persisted across postbacks!
I could not get it to maintain a change of backgroundcolor when access another page.

Answer 3

Yes then style attributes only seem to work when on client and not serverside!