How can I disable the Menu control from styling itself in javascript? - asp.net

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>Link 1</li>
<li>Link 2</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;">
Link 1
</li><li role="menuitem" class="static" style="position: relative; float: left;">
Link 2</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 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 2

On your css use the !important

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

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 5

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. :(

Answer 6

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.