Asp.menu - staying hover effect when active

Question

I have a masterpage where the asp.net menu control is.

What i want is that, if i Click a link in the menu, i want the menu item that i just clicked to stay the hover effect aslong as its active.

Is there by any chance that is possible with the asp.net menu ? :)

i have tried with a code that i found online:

<div class="topnav">
    <asp:menu id="topnav" runat="server" orientation="Horizontal" renderingmode="List" skiplinktext="" maximumdynamicdisplaylevels="1" viewstatemode="Enabled" >
        <items>
            <asp:menuitem navigateurl="~/Default.aspx" text="Home" value="home"></asp:menuitem>
            <asp:menuitem navigateurl="~/Overview.aspx" text="Overview" value="overview"></asp:menuitem>
            <asp:menuitem navigateurl="~/Benefits.aspx" text="Benefits" value="benefits"></asp:menuitem>
            <asp:menuitem navigateurl="~/Home.aspx" text="Hardware" value="hardware"></asp:menuitem>
            <asp:menuitem navigateurl="~/SDK.aspx" text="Develop" value="SDK"></asp:menuitem>
        </items>
    </asp:menu>
</div>

.topnav
{
    background-color: #ddd;
    /*margin-top: 1px;*/
    line-height: 22px;
    float: right;
    margin-right: 11px;
    background: url(../img/shadow.gif) repeat-y top right;


    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    color: #777;
    text-align: center;
}

.topnav #topnav li
{
    float: left;
}

.right .topnavcont
{
    width: 767px;
    background-color: #dddddd !important;
    height: 22px;
}

.topnav li
{
    width: 109px;
}

.topnav a:link, .topnav a:visited
{
    color: #777;
    display: block;
    background-image: url(../img/bg_n-s.gif);
    background-repeat: repeat-x;
    text-decoration: none;
    visibility: visible;
}

.topnav  a:hover 
{
    color: #fff !important;
    background-image: url(../img/bg_h-s.gif);
    display: block;
    visibility: visible;
}

topnav .staticmenuitemselected
{
    color: red;
    display: block;
    background-image: url(../img/bg_n-s.gif);
    background-repeat: repeat-x;
    text-decoration: none;
    visibility: visible;
}

Possible Duplicate? [ASP.NET: Highlight menu item of current page](http://stackoverflow.com/questions/7067944/asp-net-highlight-menu-item-of-current-page) — Izzy, Oct 23 '14 at 12:25
No, i toke the code from him :) Just to test it, but i couldn't get it to work as he had Explained :) + I dont think we had the same problem, but since i have been playing around with it for a week now, i just toke his code to test if it was possible :) — user3442766, Oct 23 '14 at 12:35

score 0 · Answer 1 · answered Oct 23 '14 at 12:31

Loop through the menuItem and check if the current page URL contains the NavigateUrl

      foreach (MenuItem item in mn.Items)
      {
     if   (Request.Url.AbsoluteUri.ToLower().Contains(Page.ResolveUrl(item.NavigateUrl.ToLower()))
     {
       item.Selected = true;
      }
        }

    REFER THIS [http://stackoverflow.com/questions/8053337/asp-net-4-highlight-menu-item-for-current-page]

_______ OR ___________

There's a StaticSelectedStyle property inside your menu.

      <asp:menu id="menu" runat="server" >
      <staticselectedstyle backcolor=""
      borderstyle=""
      bordercolor=""
      borderwidth=""/>
      </menu> 
      FIND MORE [http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.menu.includestyleblock.aspx] and [http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.menu.staticselectedstyle.aspx]

Asp.menu - staying hover effect when active

1 Answers1