17

我正在使用asp:Menu无表呈现模式的 ASP.NET 4.0 Webforms 页面上的控件：

<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:Menu 4现在提供了一个内置的List渲染模式。据我记得我没有这个闪烁的CSS友好控件，我认为这个控件没有使用Javascript。也许这是一个糟糕的步骤。我是如果可能的话，现在寻找解决方案，而无需返回 CSS 友好的菜单控件。）

编辑：

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

4

12 回答 12

34

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

例如尝试

#menu ul li ul
{
    display: none;
}

和

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

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

于 2010-08-09T17:11:36.207 回答
9

每当我在 CSS 文件和可能触发 javascript 来装饰菜单项的 onload 事件之间的页面中发生很多事情时，我也会遇到这个问题。特别是在 IE8 中，javascript 修复样式的这种延迟是丑陋的。

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

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

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

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

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

于 2012-02-24T10:29:17.323 回答
5

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

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

另一种方法是将 SkipLinkText="" 添加到每个菜单项（尚未对此进行测试）

于 2012-08-10T21:55:13.873 回答
3

我已经尝试了推荐的解决方案，即..

div.menu ul li ul { display:none }

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

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

菜单的默认渲染方向是垂直的，闪烁仅发生在水平菜单上。float:left 和 position:relative 通过将菜单项折叠到左侧单元格位置来工作，所有项目都覆盖在一个区域中。这会阻止页面跳来跳去。float:left 还将菜单项的大小减小到它所包含的文本的大小（锯齿状菜单问题）。

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

对我有用的解决方案是

div.menu { height:24px }

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

这实现了相同的结果，并将所有菜单项放在左侧的单个空间中，菜单将在该空间中呈现，但不使用 float:left，它使菜单项的默认宽度为 auto。菜单高度为菜单区域提供了一个恒定的空间，并且基于我用于水平静态菜单的高度。

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

于 2015-10-18T08:40:16.523 回答
2

我补充说：

.menu ul li ul
{
    display: none;
}

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

在 ccs 文件的底部，当我发布应用程序时，闪烁效果减少了。在更改之前，菜单项几乎覆盖了整个页面，而在您的解决方案之后只有 5 或 6 行！！！。

这是我的母版页：

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

这是 asp:menu 的 ccs 文件定义（没有我粘贴在 ccs 文件底部的新行）：

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

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

好吧，我要感谢您对“如何摆脱丑陋的 asp：菜单闪烁？”的所有回答。我将继续调查以找到完整的解决方案。再次感谢！！！

于 2014-11-03T01:37:35.177 回答
1

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

于 2011-09-16T11:39:43.823 回答
1 
#menu ul li ul 
{ 
    display: none; 
} 

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

这也对我有用。直到我在表格上放置了一个 reCaptcha，我才遇到问题。我的菜单也在母版页中制作。非常感谢你！

于 2012-03-18T01:41:10.730 回答
1

自从使用 ASP.NET 4.5.1 以来，我遇到了同样的问题，虽然我尝试使用上面的 CSS 样式标签，但我无法防止闪烁。然而，通过比较旧站点的 HTML 源代码和新站点的 HTML 源代码，很明显，缺少 {display: none} 标记。我只是通过调整 web.config 来帮助自己

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

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

于 2015-06-29T12:00:43.917 回答
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;
}
于 2011-09-12T14:42:49.983 回答
0

这显然有效（上面的建议），直到我刚刚使用 nuget 将我的 jQuery 更新到 2.1.1 并开始使用 CDN（由 YSLow 建议）。但现在这种闪烁又回来了，比以往任何时候都更糟。任何人检查它是否有更好的解决方案？谢谢。

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

<style type="text/css">
                div.menu ul li ul { display:none; }
    </style>
于 2014-07-02T15:50:47.787 回答
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>
于 2014-07-18T09:56:26.003 回答
0

我尝试了上面的想法（有变化），一些修复了奇怪的渲染（闪烁），但它们都导致了回归（例如，当你移动到它们时，子菜单会渲染得太远并飞走）。

受到另一个线程上的一个想法的启发，我尝试了一些不同的方法：最初隐藏菜单并在页面加载后取消隐藏。

一步一步：我有一个不可见的类 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>

瞧，菜单以正确的格式很好地呈现，并且在加载时没有奇怪的闪烁。

于 2018-03-15T06:03:47.910 回答