How to get rid of ugly asp:Menu flickering?

问题:

I'm using the asp:Menu control on an ASP.NET 4.0 Webforms page with table-free rendering mode:

<asp:Menu ID="MenuBase" runat="server" DataSourceID="SiteMapDataSourceMenu"
    Orientation="Horizontal" CssClass="contentmenu" RenderingMode="List" 
    IncludeStyleBlock="false">
</asp:Menu>

The menu has a horizontal main row with 5 or 6 menu items and some of them open vertical popup menus when the user hovers over them.

Often when any postback occurs and the page gets rendered again the menu "flickers" for a moment (say, half a second) which means: All menu items - including the items in the popup menus - are displayed in one or more rows one after each other before they return to the normal intended state.

In this short moment of an "unfolded" display of all menu items the menu looks AS IF Javascript had been disabled in the browser. (It seems that building the popup menus is achieved by using some Javascript in the asp:menu control.)

This behaviour is quite ugly, especially with a big menu (rendering for the short moment over 2 or 3 rows) the whole page content is moved down before it jumps back to normal display.

Do you know any solution for this problem?

Thank you in advance!

(Remark: I should mention that I used the well-known CSS-friendly menu control from CodePlex before I upgraded to ASP.NET 4.0. I supposed that I don't need the CSS-friendly control anymore because the asp:Menu in version 4 offers a built-in List rendering mode now. As far as I remember I didn't have this flickering with the CSS-friendly control and I think this control does not make use of Javascript. Perhaps this was a bad step. I am looking now for a solution without going back to the CSS-friendly menu control, if possible.)

Edit:

This flickering is browser independent, although most noticeable in IE 8 and 7. In IE 7 (or Compatibility mode in IE 8) it's extraordinary ugly since the menu items get displayed in a crazy diagonal pattern even over 5 or 6 rows.

回答1:

If anyone still needs a solution; the flickering is there because you should set the correct display style in your css for the menu.

Try for example

#menu ul li ul
{
    display: none;
}

and

#menu ul li 
{
    position: relative; 
    float: left;
    list-style: none;
}

The flickering is because the ASP.NET 4 menu uses javascript to set some inline styles.

回答2:

I also picked up this problem whenever I had a lot going on in the page between the CSS file and the onload event which presumably triggers the javascript to decorate the menu items. Particularly in IE8 this delay for javascript to fix the styling was ugly.

The solutions from peter and Clearcloud8 were almost good for me. I use this:

div.menu > ul > li
{ 
    display: inline-block;
    list-style: none; 
} 

div.menu ul li ul 
{ 
    display: none; 
}

The main difference being that I used "div.menu > ul > li" which targets only the topmost row of items, instead of "div.menu ul li" which afects the sub-menus also - the result being that the submenu items were not the same width, so they dropped down in a jagged list.

(I am using Visual Studio 2010, .Net Framework 4)

回答3:

Add these lines to the Site.css file (in the Styles folder of your VS 2010 project)

/* Fix for extra space above menu in Chrome and Safari */
img[alt='Skip Navigation Links'] {
display: none;
}

An alternative is to add SkipLinkText=”" to each menu item (have not tested this)

回答4:

I have tried the recommended solution which is ..

div.menu ul li ul { display:none }

div.menu ul li { position:relative; float:left; list-style:none }

.. and it worked to solve the flickering but introduced another problems which is jagged menu items.

The default rendering orientation of the menu is vertical and the flickering only occurs for horizontal menus. The float:left and position:relative work by collapsing the menu items into the left cell position with all items overlaid in the one area. This stops the page jumping around. The float:left also reduces the menu item size to that of the text it contains (jagged menu problem).

These fixes are not required for vertical menus.

The solution that works for me is

div.menu { height:24px }

div.menu li { right:0; position:absolute; top:0 }

This achieves the same result and places all menu items in a single space on the left where the menu will be rendered but by not using the float:left it leaves the menu items with their default width of auto. The menu height provides a constant space for the menu area and is based on the height I use for the horizontal static menu.

This setting does not cause jagged menus.

回答5:

I added:

.menu ul li ul
{
    display: none;
}

.menu ul li 
{
    position: relative; 
    /*float: left;*/
    list-style: none;
}

at botton of ccs file and when I published the application the flickering effect was reduced. Before changes, menu items covered almost the whole page and after your solution only 5 or 6 rows!!!.

This is my master page:

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="SantaMaria.SiteMaster" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
    <title></title>
    <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
    <asp:ContentPlaceHolder ID="HeadContent" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>

<script type="text/javascript" src="../Scripts/j_commons.js"></script>

    <form runat="server">
    <div class="page">
        <div class="header">
            <div class="title">
                <h1>
                    <asp:Literal ID="CompanyName" runat="server"></asp:Literal>
                </h1>
            </div>
            <div class="loginDisplay">
                <asp:LoginView ID="HeadLoginView" runat="server" EnableViewState="false">
                    <AnonymousTemplate>
                        [ <a href="~/Account/Login.aspx" ID="HeadLoginStatus" runat="server">Log In</a> ]
                    </AnonymousTemplate>
                    <LoggedInTemplate>
                        <%=Xsite.Override.getOverride("SiteMaster", "Welcome") %>    
                        <span class="bold"><asp:LoginName ID="HeadLoginName" runat="server" /></span>!
                        [ <asp:LoginStatus ID="HeadLoginStatus" runat="server" LogoutAction="Redirect" LogoutText="Log Out" LogoutPageUrl="~/Account/Login.aspx?ReturnUrl="/> ]
                    </LoggedInTemplate>
                </asp:LoginView>
            </div>
            <div class="clear hideSkiplink">
                <asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal">
                </asp:Menu>
            </div>
        </div>
        <div class="main" style="height:800px">
            <asp:ContentPlaceHolder ID="MainContent" runat="server"/>
        </div>
        <div class="clear">
        </div>
    </div>
    <div class="footer">
        
    </div>
    </form>
</body>
</html>

and this is the ccs file definitios for asp:menu (without the new lines which I paste at botton of ccs file):

div.hideSkiplink 
{
    background-color: /*#3a4f63;*/ #666666;
    width: 100%;
}

div.menu
{
    padding: 2px 0px 2px 4px;
}

div.menu ul
{
    list-style: none;
    margin: 0px;
    padding: 0px;
    width: auto;
    z-index: 10; /*Se estaba mostrando el submenu, mezclado con la pantalla de abajo!*/
}

div.menu ul li a, div.menu ul li a:visited
{
    background-color: #465c71;
    border: 1px #4e667d solid;
    color: #dde4ec;
    display: block;
    line-height: 1.35em;
    padding: 4px 20px;
    text-decoration: none;
    white-space: nowrap;
}

div.menu ul li a:hover
{
    background-color: #bfcbd6;
    color: #465c71;
    text-decoration: none;
}

div.menu ul li a:active
{
    background-color: #465c71;
    color: #cfdbe6;
    text-decoration: none;
}

The menu items are loaded from an xml file.

Well I want to thank you for all your answers about "How to get rid of ugly asp:Menu flickering?" I will continue investigating to find a complete solution. THANKS AGAIN!!!

回答6:

Same issue was with me too. But solved by removing jquery calls. :) or you can download and keep the .js script file inside the script folder instead of referencing it from online.

回答7:

#menu ul li ul 
{ 
    display: none; 
} 

 and
#menu ul li  
{ 
    position: relative;  
    float: left; 
    list-style: none; 
} 

This worked for me also. I was not having an issue until I placed a reCaptcha on the form. My menu was being produced within a Master Page also. Thank you very much!

回答8:

I had the same problem since using ASP.NET 4.5.1 and though I tried to use the CSS style tags from above I wasn't able to prevent the flickering. However by comparing the HTML source from older sites to the new one it was clear, that the {display: none} tag was missing. I simply helped myself by adapting the web.config with

<pages controlRenderingCompatibilityVersion="3.5" clientIDMode="AutoID">

This helped as it produced the same HTML source as previously although it is surely not a nice workaround.

回答9:

The above solution was close, but did not work for me. It required the slight modification below in order to fix the problem being described. When I create a new ASP.NET web forms application project using Visual Studio 2010, the CSS that is generated for the menu by default makes use of ".menu" (CSS classes) to apply style rather than "#menu" (an element with ID of "menu").

#menu - does not work

.menu - does work

So, in other words, put this into your CSS file near the bottom:

.menu ul li ul
{
    display: none;
}

.menu ul li 
{
    position: relative; 
    float: left;
    list-style: none;
}

回答10:

This apparently worked (the suggestions above) until I just updated my jQuery to 2.1.1 using nuget and started using the CDN (suggested by YSLow). But now that flicker is back, worse than ever. Anyone check to see it there is a better solution? Thanx.

I also found this solution but no luck: (in the head)

<style type="text/css">
                div.menu ul li ul { display:none; }
    </style>

回答11:

You copy below style sheet code and paste it within site.master page and it run perfect and also remove your menu style code..

<style type="text/css">
    div.hideSkiplink
    {
        background-color: #3a4f63;
        width: 100%;
    }
    div.menu ul li ul
    {
        display: none;
    }
    div.menu ul
    {
        float: left;
        list-style: none;
    }
    div.menu li
    {
        list-style: none;
        float:inherit;
    }
    div.menu
    {
        padding: 2px 0px 2px 0px;
    }
    div.menu ul
    {
        margin: 0px;
        padding: 0px;
        width: auto;
    }

    div.menu ul li a, div.menu ul li a:visited
    {
        background-color: #465c71;
        border: 1px #4e667d solid;
        color: #dde4ec;
        display: block;
        line-height: 1.35em;
        padding: 4px 20px;
        text-decoration: none;
        white-space: nowrap;
        position: relative;
    }

    div.menu ul li a:hover
    {
        background-color: #bfcbd6;
        color: #465c71;
        text-decoration: none;
    }

    div.menu ul li a:active
    {
        background-color: #465c71;
        color: #cfdbe6;
        text-decoration: none;
    }
</style>

回答12:

I tried the ideas above (with variations) and some fixed the odd rendering (the flicker as it were) but they all caused regressions (example submenus that would render too far away and fly away when you move to them).

Inspired by an idea on another thread, I tried something different: hide the menu initially and unhide it once the page has loaded.

Step by step: I have an invisible class invButton I already had and use for hiding buttons, etc.

<style type="text/css">
.invButton {
    height: 0;
    width: 0;
    visibility: hidden;
    display: none;
    border-style: none;
    border-width: 0;
}
</style>

Next I set the CssClass of the offensive flickering menu to CssClass="invButton", so it starts invisible.

<asp:Menu runat="server" ID="Menu1" ... CssClass="invButton" ... RenderingMode="List" />

Finally, once the page hits '$(document).ready' I remove the class.

<script type="text/javascript">
$(document).ready(function () {
  $('#ctl00_Menu1').removeClass('invButton');
});
</script>

Voila, menu renders nicely in correct format and no weird flickering at load up.