Disable javascript generated by asp.net menu control

Question

I have a menu created using the asp.net menu control. I have added JQuery script that changes the display from pop-appearing to rolling out accordion style. However the pop-appearing still occurs, so what occurs overall is 'Mouse over Menu -> Sub Menu Appears --> Sub Menu Rolls back up'

What I am looking for, is a method to disable the javascript that asp.net generates that causes the sub menus to appear on mouse over, so that the replacement script that I have can function stand alone.

In other answers similar to this question I found the following:

public class MyCustomMenu : System.Web.UI.WebControls.Menu
{
    protected override void OnPreRender(EventArgs e)
    {
        // Don't call base OnPreRender
        //base.OnPreRender(e);
    }
}

However adding that to my masterpage.cs file did not solve the issue.

Answer 1

If you look at the HTML rendered by menu control you will see that every menu element has a function call on mouse over, called Menu_HoverStatic. To disable it simple include an empty function by the same name in your ASPX markup:

<script type="text/javascript">
   Menu_HoverStatic = function () { };
</script>

This will effectively disable original mouse over. Using this method you can disable other original event handlers if needed.

Answer 2

One thing that not everyone is familiar with is the use of Control Adapters to customize how a standard control renders.

Using adapters you can for example alter the output of the menu to be clean <ul> and <li> elements, integrate it with jquery, etc.

Here's an example of using ASP.NET 2.0 CSS Friendly Control Adapters on menues: http://www.asp.net/cssadapters/WalkThru/WalkThrough.aspx#SimpleMenu