如何擺脫醜陋的ASP：菜單閃爍？

我使用asp:Menu控件的ASP.NET 4.0 Web表單頁面上可用表渲染模式：如何擺脫醜陋的ASP：菜單閃爍？

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

菜單上有一個水平主排，5或6個菜單項，其中一些垂直開放當用戶懸停在它們上面時彈出菜單。

通常，當發生任何回發並且頁面被再次呈現時，菜單「閃爍」片刻（例如，半秒），這意味着：所有菜單項目（包括彈出菜單中的項目）顯示爲一個或在它們返回到正常的預期狀態之前，彼此相繼更多的行。

在所有菜單項的「展開」顯示的短暫時刻，菜單看起來像是如果JavaScript在瀏覽器中被禁用。（看起來，構建彈出式菜單是通過在asp：菜單控件中使用一些Javascript來實現的。）

這種行爲非常難看，尤其是對於大菜單（呈現時間超過2或3行的短時間）整個頁面內容在跳轉回正常顯示之前向下移動。

你知道這個問題的解決方案嗎？

預先感謝您！（注意：我應該提到的是，在升級到ASP.NET 4.0之前，我使用了CodePlex中着名的CSS友好菜單控件，我認爲不再需要CSS友好控件，因爲asp ：版本4中的菜單現在提供了一個內置的列表渲染模式，據我所知，我沒有使用CSS友好的控件閃爍，我認爲這個控件沒有使用Javascript。步我現在尋找一個解決方案，而不必返回到CSS友好的菜單控制，如果可能的話）

編輯：

這是閃爍器independ雖然在IE 8和7中最引人注目。在IE 7（或IE 8中的兼容模式）中，它非常難看，因爲菜單項以超過5或6行的對角線格式顯示。

來源

2010-07-13 Slauma

你沒有提到你正在使用母版頁，但是這個問題中的一些答案可能有幫助（不知道你是否已經看到它）。 HTTP：//計算器。com/questions/888245/asp-net-menu-control-renders-when-on-a-master-page – 2010-07-13 20:03:55

謝謝你的鏈接！這非常有幫助！我沒有看到這個問題。是的，我正在使用母版頁，乍看之下，它看起來像將菜單放在自己的ContentPlaceHolder中的解決方案正在工作。我必須在現場服務器上測試它，因爲在我的開發機器上，我不經常發生這種閃爍現象。在具有正常「互聯網實時延遲」的生產服務器上，這一點更爲明顯。 – Slauma 2010-07-13 20:48:11

不幸的是，對真實延遲的現場服務器進行的測試表明，將菜單封裝在自己的ContentPlaceHolder中的解決方案實際上並不奏效。閃爍仍然存在（在IE 8（有和沒有兼容模式）和Firefox測試）。 – Slauma 2010-07-19 20:08:14

如果有人仍然需要解決方案;閃爍在那裏，因爲你應該在你的css中爲菜單設置正確的顯示風格。

嘗試例如

#menu ul li ul 
{ 
    display: none; 
}

和

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

的閃爍是因爲ASP.NET 4菜單使用JavaScript來設置一些內聯樣式。

來源

2010-08-09 17:11:36 peter

是的！我仍然需要一個解決方案。但現在我有一個，謝謝你！我只在'#menu ul li ul'中加了'display：none'，閃爍消失了。只需通過IE 7 + 8，Firefox，Chrome和Opera（它們都顯示此菜單閃爍）在現場服務器上快速測試，並且現在運行正常。再次感謝你，這真的是一個很好的幫助！ – Slauma 2010-08-09 18:04:35

這是此問題的完美解決方案。簡單而有效！ – Stuart 2013-06-24 14:48:41

這個問題仍然存在：（ – 2015-03-12 08:43:09

上述解決方案非常接近，但對我無效。爲了解決所描述的問題，它需要稍作修改。當我使用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; 
}

來源

2011-09-12 14:42:49 ClearCloud8

＃（散列）用於通過id選擇，而。（dot）用於按類選擇，因此可以根據上下文使用 – CodeClimber 2012-04-12 16:00:28

同樣的問題與我同在了。但通過刪除jquery調用解決。 :) 或者您可以將.js腳本文件下載並保留在腳本文件夾中，而不是從聯機引用它。

來源

2011-09-16 11:39:43

我也遇到了這個問題，每當我有很多事情發生在CSS文件和onload事件之間，這大概會觸發javascript來裝飾菜單項。特別是在IE8中，爲了修復這個樣式，這個延遲是醜陋的。

peter和Clearcloud8的解決方案對我來說幾乎是好的。我用這個：

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

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

的主要區別是，我用「div.menu> ul>裏」它的目標，而不是「div.menu UL李」，這afects子唯一項目的最上面一行，菜單也是 - 結果是子菜單項不是相同的寬度，所以他們下降了一個鋸齒形的列表。

（我使用Visual Studio 2010，.Net框架4）

來源

2012-02-24 10:29:17 Etherman

我也有問題，鋸齒狀的菜單，Ugh，idk爲什麼這個控制器給我帶來了很多麻煩 - 內置的同樣不會少！ – John 2015-03-09 21:46:25

#menu ul li ul 
{ 
    display: none; 
} 

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

這也爲我工作。直到我在表單上放置了reCaptcha之前，我沒有問題。我的菜單也在主頁內製作。非常感謝你！

來源

2012-03-18 01:41:10 James

這些行添加到的site.css文件（在你的VS 2010項目的樣式文件夾）

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

另一種方法是添加SkipLinkText =」」給每個菜單項（沒有測試）

來源

2012-08-10 21:55:13 Tanweer

在菜單標籤中添加SkipLinkText =「」可以完美地爲Chrome瀏覽器擺脫菜單上的額外空間！ – 2015-08-11 16:26:56

這顯然工作（上述建議），直到我剛剛使用nuget更新我的jQuery到2.1.1並開始使用CDN（由YSLow建議），但現在閃爍回來了，比以往任何時候都更糟。它有更好的解決方案嗎？Thanx。

我也發現這一解決方案，但沒有運氣：（在頭）

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

來源

2014-07-02 15:50:47 user2957885

您複製下面的樣式表代碼的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-18 09:56:26 Jeetu

我說：

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

，這是CCS文件definitios爲ASP：菜單（不包括新線，我在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-03 01:37:35 Daniel

自從使用ASP.NET 4.5.1以來，我遇到了同樣的問題，雖然我嘗試使用上面的CSS樣式標記，但無法防止閃爍。但是，通過比較舊網站的HTML源代碼與新網站的HTML源代碼，很明顯，{display：none}標記缺失。我只是用

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

這有助於它產生相同的HTML源如以前雖然它肯定不是一個很好的解決方法適應的web.config順手拿。

來源

2015-06-29 12:00:43 burton314

我曾嘗試推薦的解決方案是..

div.menu ul li ul { display:none } 
 

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

..和它的工作，解決了閃爍，但推出的又一問題，這是參差不齊的菜單項。

菜單的默認渲染方向是垂直的，閃爍只發生在水平菜單上。 float：left和position：相關工作，將菜單項摺疊到左側單元格位置，並將所有項目重疊在一個區域中。這會停止頁面跳轉。 float：left也將菜單項的大小縮小爲它包含的文本的大小（參差不齊的菜單問題）。

垂直菜單不需要這些修補程序。

爲我的作品的解決方案是

div.menu { height:24px } 
 

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

這實現了相同的結果和地方在哪裏菜單將被渲染，但通過不左一個空間中的所有菜單項使用float：left留下菜單項，其默認寬度爲auto。菜單高度爲菜單區域提供了一個恆定的空間，並基於我用於水平靜態菜單的高度。

此設置不會導致鋸齒狀的菜單。

來源

2015-10-18 08:40:16

如何擺脫醜陋的ASP：菜單閃爍？

回答

相關問題