How can I disable the Menu control from styling itself in javascript?

Question

I'm using Visual Studio 2010 and ASP.NET 4.0 to render a Menu control as an HTML list so I can style it using CSS. Here is the code I am using below

<asp:Menu ID="navlist" runat="server" Orientation="Horizontal"
SkipLinkText="" ClientIDMode="Static" DataSourceID="MenuSource" 
MaximumDynamicDisplayLevels="0" IncludeStyleBlock="False" 
StaticDisplayLevels="2">
</asp:Menu>

This produces the following HTML

<!-- URL shortened -->
<script src="/WebResource.axd?...t=634066906994188146"type="text/javascript"></script>

<div id="navlist">
    <ul>
        <li><a href="link1.html">Link 1</a></li>
        <li><a href="link2.html">Link 2</a></li>
    </ul>
</div>

At first glance this looks like exactly what I wanted. However, if I open up WebResource.axd there is a whole bunch of javascript code related to the menu. Part of this code is applying it's own inline styles to the list. Using FireBug I can view the HTML markup after the javascript has executed and it looks something like this:

<div id="navlist" style="float: left;">
    <ul class="level1 static" tabindex="0" style="position: relative; width: auto; float: left;" role="menubar">
        <li role="menuitem" class="static" style="position: relative; float: left;">
            <a href="link1.html" class="level2 static" tabindex="-1">Link 1</a>
        </li><li role="menuitem" class="static" style="position: relative; float: left;">
            <a href="link2.html" class="level2 static" tabindex="-1">Link 2</a></li>
    </ul>
</div>

These inline styles ultimately affect the layout of my page. I have no need for any of the scripts in WebResource.axd. How can I prevent this script from being rendered in the final markup of the page?

Answer 1

You can't do much to change the out-of-the-box functionality of the Menu control. However, you could either create your own control or use the CSS Control Adapter Toolkit.

Answer 2

You can tell the menu to NOT style itself if you want to just use the IncludeStyleBlock Attribute

By default its turned on "true"

<asp:Menu IncludeStyleBlock="False" />

Answer 3

I've created a custom menu (derived from System.Web.UI.WebControls.Menu) and replaced the OnPreRender:

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

That did the trick.

Answer 4

On your css use the !important

Answer 5

---

I managed this by removing inline styles and changing some class names via jQuery. Of course you can re-style every element but it just produces a lot of unnecessary css code.

Use this, if you want to remove those inline styles from li, a, ul and divs:

$("#navlist li,#navlist li a,#navlist ul,#navlist div").removeAttr('style');

Second you can change those class names e.g.:

$("#from-this-element").removeClass(.remove-me).addClass('.new-class');

And I think it's the best way to use this script after the page has loaded.

Answer 6

I tried to override the asp:menu with a custom class, but still haven't learned how to simply remove all attributes from the ul, li, and a tags so that I could apply my own css code to a clean list.

Imports Microsoft.VisualBasic
Namespace MCO

Public Class MyCustomMenu
    Inherits Menu

        Protected Overrides Sub OnPreRender(e As EventArgs)
            ' don't use this:
            ' MyBase.OnPreRender(e)

            ' but leaving this blank produces NO rendered menu
        End Sub
    End Class
End Namespace

---

I have also tried the jQuery method:

$("#navlist li,#navlist li a,#navlist ul,#navlist div").removeAttr('style');

But because the .net webresource is the last thing to run, I found that jQuery line didn't work. It should, but doesn't. :(