Menu control CSS breaks when inside UpdatePanel
-
02-07-2019 - |
Question
I have a menu control inside of an updatepanel. When I hover over a selected item, and then move back off of it, the css class gets set to staticSubMenuItem instead of staticSubMenuItemSelected. Is there a fix for this?
<asp:UpdatePanel runat="server">
<ContentTemplate>
<asp:Menu ID="SubMenu" runat="server" SkinID="subMenu" OnMenuItemClick="SubMenu_Click"
CssClass="floatRight" StaticMenuItemStyle-CssClass="staticSubMenuItem" StaticSelectedStyle-CssClass="staticSubMenuItemSelected"
StaticHoverStyle-CssClass="staticSubMenuItemSelected">
<Items>
<asp:MenuItem Text="Item 1" Value="0" Selected="true" />
<asp:MenuItem Text="Item 2" Value="1" />
</Items>
</asp:Menu>
</ContentTemplate>
</asp:UpdatePanel>
Solution
The problem is here:
StaticSelectedStyle-CssClass="staticSubMenuItemSelected"
StaticHoverStyle-CssClass="staticSubMenuItemSelected"
If you have a different CssClass set for Selected and Hover, the problem is fixed. Create a "Hover" css class and change the above to:
StaticSelectedStyle-CssClass="staticSubMenuItemSelected"
StaticHoverStyle-CssClass="staticSubMenuItemHover"
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow