如何摆脱丑陋的asp:菜单闪烁? [英] How to get rid of ugly asp:Menu flickering?

问题描述

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

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>

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

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.

在所有菜单项的展开"显示的这一短暂时刻，菜单看起来好像在浏览器中禁用了 Javascript.(似乎是通过在asp:menu控件中使用一些Javascript来构建弹出菜单.)

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

这种行为非常难看，尤其是对于大菜单(在短时间内呈现 2 或 3 行)时，整个页面内容在跳回正常显示之前向下移动.

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?

先谢谢你！

(备注:我应该提一下，在升级到 ASP.NET 4.0 之前，我使用了 CodePlex 中著名的 CSS-friendly 菜单控件.我认为我不再需要 CSS-friendly 控件了，因为 asp:版本 4 中的 Menu 现在提供了一个内置的 List 渲染模式.据我所知，我没有使用 CSS-friendly 控件出现这种闪烁，我认为这个控件没有使用 Javascript.也许这是一个糟糕的步骤.如果可能的话，我现在正在寻找一种解决方案，而无需返回对 CSS 友好的菜单控件.)

(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.)

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

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.

推荐答案

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

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

试试看

#menu ul li ul
{
    display: none;
}

和

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

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

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

这篇关于如何摆脱丑陋的asp:菜单闪烁?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！