如何摆脱丑陋的asp：菜单闪烁？

时间：2010-07-13 19:47:19

标签： asp.net menu asp.net-4.0 aspmenu-control

我正在使用带有无表格渲染模式的ASP.NET 4.0 Webforms页面上的asp:Menu控件：

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

菜单有一个水平主行，有5个或6个菜单项，当用户将鼠标悬停在菜单项上时，其中一些菜单会打开垂直弹出菜单。

通常当发生任何回发并且页面再次呈现时，菜单会“闪烁”一会儿（例如，半秒），这意味着：所有菜单项 - 包括弹出菜单中的项目 - 都显示在一个或多个中在它们返回到正常的预期状态之前一个接一个地排。

在所有菜单项的“展开”显示的短暂时刻，菜单看起来如果在浏览器中禁用了Javascript。 （似乎构建弹出菜单是通过在asp：menu控件中使用一些Javascript来实现的。）

这种行为非常难看，特别是对于一个大菜单（渲染2或3行的短时间内），整个页面内容在跳回到正常显示之前会向下移动。

你知道解决这个问题的方法吗？

提前谢谢！

（注意：我应该提一下，在升级到ASP.NET 4.0之前，我使用了CodePlex中众所周知的CSS友好菜单控件。我认为我不再需要CSS友好控件，因为asp：版本4中的菜单现在提供了一个内置的列表渲染模式。据我所知，我没有使用CSS友好控件的闪烁，我认为这个控件没有使用Javascript。也许这是一个糟糕的一步我现在正在寻找一个解决方案，如果可能的话，不需要回到CSS友好的菜单控件。）

修改

这种闪烁与浏览器无关，虽然在IE 8和7中最为明显。在IE 7（或IE 8中的兼容模式）中，它非常难看，因为菜单项以疯狂的对角线模式显示，甚至超过5或6行。

12 个答案:

答案 0 :(得分：32)

如果还有人需要解决方案;闪烁是因为您应该在菜单的CSS中设置正确的显示样式。

试试例子

#menu ul li ul
{
    display: none;
}

和

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

闪烁是因为ASP.NET 4菜单使用javascript来设置一些内联样式。

答案 1 :(得分：9)

每当我在CSS文件和onload事件之间的页面中进行大量操作时，我也会发现这个问题，这可能会触发javascript来装饰菜单项。特别是在IE8中，javascript修复样式的延迟很难看。

peter和Clearcloud8的解决方案对我来说几乎都很好。我用这个：

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

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

主要区别在于我使用了“div.menu＆gt; ul＆gt; li”，它只针对最上面的一行项目，而不是“div.menu ul li”，这也会影响子菜单 - 结果是子菜单项的宽度不一样，所以它们放在一个锯齿状的列表中。

（我正在使用Visual Studio 2010，.Net Framework 4）

答案 2 :(得分：5)

将这些行添加到Site.css文件（在VS 2010项目的Styles文件夹中）

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

另一种方法是将SkipLinkText =“”添加到每个菜单项（尚未测试过）

答案 3 :(得分：3)

我尝试了推荐的解决方案..

＆＃13;
＆＃13; 
div.menu ul li ul { display:none }

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

..它解决了闪烁问题，但引入了另一个问题，即锯齿状的菜单项。

菜单的默认渲染方向是垂直的，只有水平菜单才会出现闪烁。 float：left和position：相对工作，将菜单项折叠到左侧单元格位置，所有项目都覆盖在一个区域中。这会阻止页面跳转。 float：left还将菜单项大小缩小为它包含的文本大小（锯齿状菜单问题）。

垂直菜单不需要这些修复。

适合我的解决方案是

＆＃13;
＆＃13; 
div.menu { height:24px }

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

这实现了相同的结果，并将所有菜单项放在左边的一个空格中，菜单将被渲染，但不使用浮动：左边的菜单项的默认宽度为auto。菜单高度为菜单区域提供了一个恒定的空间，并且基于我用于水平静态菜单的高度。

此设置不会导致锯齿状菜单。

答案 4 :(得分：2)

我补充说：

＆＃13;
＆＃13; 
.menu ul li ul
{
    display: none;
}

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

在ccs文件的botton上，当我发布应用程序时，闪烁效果降低了。在更改之前，菜单项几乎覆盖整个页面，并且在解决方案之后只有5或6行!!!。

这是我的母版页：

＆＃13;
＆＃13; 
<%@ 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>
＆＃13;
＆＃13;
＆＃13;

这是用于asp：menu的ccs文件definitios（没有我在ccs文件的botton处粘贴的新行）：

＆＃13;
＆＃13; 
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;
}
＆＃13;
＆＃13;
＆＃13;

菜单项是从xml文件加载的。

嗯，我想感谢你们所有的答案＆＃34;如何摆脱丑陋的asp：菜单闪烁？＆＃34;我会继续调查，找到一个完整的解决方案。再次感谢!!!

答案 5 :(得分：1)

同样的问题也与我同在。但通过删除jquery调用解决了。 :) 或者您可以将.js脚本文件下载并保存在脚本文件夹中，而不是从在线引用它。

答案 6 :(得分：1)

#menu ul li ul 
{ 
    display: none; 
} 

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

这对我也有用。在我在表单上放置reCaptcha之前，我没有遇到任何问题。我的菜单也在Master Page中生成。非常感谢你！

答案 7 :(得分：1)

自从使用ASP.NET 4.5.1后我遇到了同样的问题，虽然我尝试使用上面的CSS样式标签但是我无法阻止闪烁。 但是，通过将旧网站的HTML源与新网站的HTML源进行比较，很明显，{display：none}标记丢失了。 我只是通过使用

调整web.config来帮助自己 
<pages controlRenderingCompatibilityVersion="3.5" clientIDMode="AutoID">

这有助于生成与之前相同的HTML源代码，尽管它肯定不是一个很好的解决方法。

答案 8 :(得分：0)

上述解决方案很接近，但对我不起作用。为了解决所描述的问题，它需要在下面稍作修改。当我使用Visual Studio 2010创建新的ASP.NET Web窗体应用程序项目时，默认情况下为菜单生成的CSS使用“.menu”（CSS类）来应用样式而不是“#menu”（元素） ID为“menu”）。

#menu   - 不起作用

。菜单   - 确实有效

所以，换句话说，把它放到靠近底部的CSS文件中：

.menu ul li ul
{
    display: none;
}

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

答案 9 :(得分：0)

这显然有效（上面的建议），直到我使用nuget将我的jQuery更新为2.1.1并开始使用CDN（由YSLow建议）。但现在闪烁又回来了，比以往更糟糕。任何人检查看到它有一个更好的解决方案？感谢名单。

我也找到了这个解决方案，但没有运气： （在头脑中）

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

答案 10 :(得分：0)

您复制下面的样式表代码并将其粘贴到site.master页面中，它运行完美，并删除您的菜单样式代码.. 

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

答案 11 :(得分：0)

我尝试了上面的想法（带有变化），有些修复了奇怪的渲染（闪烁原样），但它们都引起了回归（示例子菜单会渲染得太远，当你移动到它们时会飞走）。 / p>

受另一个主题的想法的启发，我尝试了不同的东西：最初隐藏菜单，并在页面加载后取消隐藏。

一步一步：我有一个不可见的类invButton我已经拥有并用于隐藏按钮等。

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

接下来，我将攻击性闪烁菜单的CssClass设置为CssClass =“invButton”，因此它开始不可见。

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

最后，一旦页面点击'$（document）.ready'，我就删除该类。

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

Voila，菜单呈现正确的格式，加载时没有奇怪的闪烁。

相关问题
最新问题