3

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?

Cory
  • 12,404
  • 7
  • 33
  • 28

6 Answers6

8

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" />
Jacqueline Loriault
  • 680
  • 8
  • 16
5

On your css use the !important

Ola
  • 51
  • 1
  • 2
4

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.

ajcs
  • 93
  • 7
  • I looked at dozens of solutions/suggestions but yours was the simplest and cleanest. It worked like a charm. – tono Dec 09 '21 at 14:22
2

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.

David Neale
  • 16,498
  • 6
  • 59
  • 85
1

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

  • Consider not using the `Menu` control, and instead using a plain jQuery menu widget. – John Saunders May 05 '15 at 16:19
  • I've worked out other alternatives when all I need to do is display a menu without any filtering. There are times when I _must_ use the asp:menu control because it does security trimming by active directory role. I've tried to use jQuery to hide links by role match (or non-match) without success. –  May 08 '15 at 05:09
0

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.

Arthustiak
  • 1