Как избавиться от уродливого осина: мерцание меню?

Question

Я использую элемент управления asp:Menu на странице веб-форм ASP.NET 4.0 с режимом рендеринга без таблиц:

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

Меню имеет горизонтальный основной ряд с 5 или 6 пунктами меню инекоторые из них открывают вертикальные всплывающие меню, когда пользователь наводит на них курсор.

Часто при возникновении обратной передачи и повторной визуализации страницы меню на мгновение «мерцает» (скажем, полсекунды), что означает: Всепункты меню, включая элементы во всплывающих меню, отображаются в одной или нескольких строках один за другим, прежде чем они вернутся в нормальное заданное состояние.

В этот короткий момент «развернутого» отображения всего менюпункты меню выглядит КАК ЕСЛИ Javascript был отключен в браузере.(Похоже, что создание всплывающих меню достигается с помощью некоторого Javascript в элементе управления asp:).

Это поведение довольно уродливо, особенно с большим меню (рендеринг на короткий момент на 2 или 3 рядах) весь контент страницы перемещается вниз, прежде чем он возвращается к нормальному отображению.

Знаете ли вы какое-либо решение для этой проблемы?

Заранее спасибо!

(Примечание: Я должен упомянуть, что я использовал хорошо известный CSS-дружественный элемент управления меню из CodePlex перед обновлением до ASP.NET 4.0. Я предположил, что мне больше не нужен CSS-дружественный элемент управления, потому что asp: Menu в версии 4 предлагаетвстроенный режим рендеринга List. Насколько я помню, у меня не было этого мерцания с CSS-дружественным элементом управления, и я думаю, что этот элемент управления не использует Javascript. Возможно, это был плохой шаг. Я смотрю сейчасдля решения, не возвращаясь к CSS-дружественному элементу управления меню, если возможно.)

Редактировать:

Это мерцание просмотра• независимость, хотя и наиболее заметная в IE 8 и 7. В IE 7 (или в режиме совместимости в IE 8) это ужасно некрасиво, поскольку пункты меню отображаются сумасшедшим диагональным узором даже в 5 или 6 строках.

Answer 1

Если кому-то все еще нужно решение; мерцание есть, потому что вы должны установить правильный стиль отображения в вашем CSS для меню.

Попробуйте, например,

#menu ul li ul
{
    display: none;
}

и

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

Мерцание связано с тем, что в меню ASP.NET 4 для настройки некоторых встроенных стилей используется JavaScript.

Answer 2

Я также поднимал эту проблему всякий раз, когда у меня происходило много событий на странице между файлом 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)

Answer 3

Добавьте эти строки в файл Site.css (в папке Styles вашего проекта VS 2010)

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

Альтернативой является добавление SkipLinkText = ”" в каждый пункт меню (не проверял это)

Answer 4

Я пробовал рекомендуемое решение, которое ..

div.menu ul li ul { display:none }

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

.. и это сработало, чтобы устранить мерцание, но добавило еще одну проблему - неровные пункты меню.

Ориентация рендеринга меню по умолчанию - вертикальная, и мерцание возникает только для горизонтальных меню. Поплавок: слева и положение: относительная работа путем свертывания пунктов меню в левую позицию ячейки со всеми элементами, наложенными на одну область. Это останавливает страницу, прыгающую вокруг. Float: left также уменьшает размер элемента меню до размера текста, который он содержит (проблема с зубчатым меню).

Эти исправления не требуются для вертикальных меню.

Решение, которое работает для меня это

div.menu { height:24px }

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

Это дает тот же результат и помещает все элементы меню в одном месте слева, где будет отображаться меню, но без использования float: left оставляет элементы меню с их шириной по умолчанию auto. Высота меню обеспечивает постоянное пространство для области меню и основывается на высоте, которую я использую для горизонтального статического меню.

Эта настройка не вызывает зубчатых меню.

Answer 5

Я добавил:

.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 для меню 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-файла.

Ну, я хочу поблагодарить вас за все ваши ответы на тему "Как избавиться от уродливого осина: мерцание меню?" Я буду продолжать расследование, чтобы найти полное решение. СПАСИБО СНОВА !!!

Answer 6

У меня была та же проблема с тех пор, как я использовал ASP.NET 4.5.1, и хотя я пытался использовать теги стилей CSS сверху, я не смог предотвратить мерцание. Однако, сравнивая исходный HTML-код с старых сайтов с новым, стало ясно, что тег {display: none} отсутствует. Я просто помог себе, адаптировав web.config с помощью

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

Это помогло, так как он генерировал тот же источник HTML, что и раньше, хотя это, безусловно, не хороший обходной путь.

Answer 7

#menu ul li ul 
{ 
    display: none; 
} 

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

Это сработало и для меня.У меня не было проблемы, пока я не поместил reCaptcha в форму.Мое меню также создавалось на главной странице.Большое спасибо!

Answer 8

Та же проблема была со мной тоже. Но решается удалением вызовов jquery. :) или вы можете скачать и сохранить файл сценария .js в папке сценария вместо ссылки на него из Интернета.

Answer 9

Я попробовал приведенные выше идеи (с вариациями), и некоторые исправили странный рендеринг (как бы мерцание), но все они вызывали регрессии (например, подменю, которые будут рендериться слишком далеко и улетать при переходе к ним). 1001 *

Вдохновленный идеей в другом потоке, я попробовал что-то другое: сначала скрыть меню и показать его после загрузки страницы.

Шаг за шагом: у меня уже есть невидимый класс 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>

Вуаля, меню отображается правильно в правильном формате и не странно мерцает при загрузке.

Answer 10

Вы копируете приведенный ниже код таблицы стилей и вставляете его на страницу 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>