发表新帖
发表新帖

How to get rid of ugly asp:Menu flickering?

后端 未结
关注
12 1079
遥遥无期
遥遥无期 2020-12-24 14:37

I\'m using the asp:Menu control on an ASP.NET 4.0 Webforms page with table-free rendering mode:
相关标签:
12条回答
  • 太阳男子
    2020-12-24 14:57

    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!!!

    0 讨论(0)
  • [愿得一人]
    2020-12-24 15:01

    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>
    0 讨论(0)
  • 花落未央
    2020-12-24 15:06

    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.

    0 讨论(0)
  • 南笙
    2020-12-24 15:07

    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>
    0 讨论(0)
  • 忘了有多久
    2020-12-24 15:11

    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)

    0 讨论(0)
  • 盖世英雄少女心
    2020-12-24 15:13

    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.

    0 讨论(0)
 看不清?
提交回复
热议问题