如何摆脱丑陋的asp:菜单闪烁?

发布于 2024-09-09 04:02:59 字数 1019 浏览 7 评论 0原文

我在具有无表渲染模式的 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:Menu 4 现在提供了一个内置的列表渲染模式,据我所知,我没有使用 CSS 友好的控件,并且我认为该控件没有使用 Javascript,也许这是一个糟糕的步骤。现在正在寻找解决方案,如果可能的话,无需返回 CSS 友好的菜单控件。)

编辑:

这种闪烁与浏览器无关,尽管在 IE 8 和 7 中最明显。在 IE 7 中(或兼容性) IE 8 中的模式)它非常丑陋,因为菜单项甚至以疯狂的对角线模式显示,甚至超过 5 或 6 行。

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.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(12

白云不回头 2024-09-16 04:02:59

如果有人仍然需要解决方案;之所以会出现闪烁,是因为您应该在 css 中为菜单设置正确的显示样式。

尝试例如

#menu ul li ul
{
    display: none;
}

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

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

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.

硪扪都還晓 2024-09-16 04:02:59

每当我在 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 > ul > li”,它仅针对最上面一行的项目,而不是“div.menu ul li”,它也影响子菜单 - 结果由于子菜单项的宽度不同,因此它们以锯齿状列表的形式下降。

(我使用的是 Visual Studio 2010,.Net Framework 4)

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)

错爱 2024-09-16 04:02:59

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

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

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

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)

禾厶谷欠 2024-09-16 04:02:59

我已经尝试过推荐的解决方案,即..

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。菜单高度为菜单区域提供了恒定的空间,并且基于我用于水平静态菜单的高度。

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

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.

花海 2024-09-16 04:02:59

我补充道:

.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:菜单闪烁?”的所有回答。我将继续调查以找到完整的解决方案。再次感谢!!!

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

坠似风落 2024-09-16 04:02:59

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

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.

紫瑟鸿黎 2024-09-16 04:02:59
#menu ul li ul 
{ 
    display: none; 
} 

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

这对我也有用。在我在表单上放置 reCaptcha 之前,我没有遇到任何问题。我的菜单也是在母版页中制作的。非常感谢!

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

夏至、离别 2024-09-16 04:02:59

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

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

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

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.

好倦 2024-09-16 04:02:59

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

#菜单
- 不起作用

.menu
- 有效

因此,换句话说,将其放入 CSS 文件底部附近:

.menu ul li ul
{
    display: none;
}

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

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;
}
芸娘子的小脾气 2024-09-16 04:02:59

这显然是有效的(上面的建议),直到我使用 nuget 将 jQuery 更新到 2.1.1 并开始使用 CDN(由 YSLow 建议)。但现在闪烁又回来了,而且比以前更严重。有人检查一下是否有更好的解决方案?谢谢。

我也找到了这个解决方案,但没有运气:
(在头部)

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

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>
叶落知秋 2024-09-16 04:02:59

您复制下面的样式表代码并将其粘贴到 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>

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>
铃予 2024-09-16 04:02:59

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

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

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

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

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.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文