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

Я использую элемент управления 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 был отключен в браузере. (Кажется, что создание всплывающих меню достигается с помощью некоторого Javascript в элементе управления asp:.)

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

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

Заранее благодарю вас!

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

Edit:

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

ОТВЕТЫ

Ответ 1

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

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

#menu ul li ul
{
    display: none;
}

и

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

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

Ответ 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)

Ответ 3

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

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

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

Ответ 4

Я добавил:

.menu ul li ul
{
    display: none;
}

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

Ответ 5

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

div.menu ul li ul { display:none }

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

Ответ 6

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

Ответ 7

#menu ul li ul 
{ 
    display: none; 
} 

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

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

Ответ 8

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

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

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

Ответ 9

Вышеупомянутое решение было близко, но не работало для меня. Для исправления описанной проблемы потребовалось небольшое изменение ниже. Когда я создаю новый проект приложений ASP.NET для веб-форм с использованием Visual Studio 2010, CSS, который создается для меню по умолчанию, использует ".menu" (классы CSS) для применения стиля, а не "#menu" (элемент с идентификатором "меню" ).

#menu  - не работает

.menu  - работает

Итак, другими словами, поместите это в свой CSS файл внизу:

.menu ul li ul
{
    display: none;
}

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

Ответ 10

Это, по-видимому, сработало (предложения выше), пока я просто не обновил свой jQuery до 2.1.1 с помощью nuget и начал использовать CDN (предложенный YSLow). Но теперь, когда мерцание вернулось, хуже, чем когда-либо. Кто-нибудь проверяет, есть ли лучшее решение? Thanx.

Я также нашел это решение, но не повезло: (в голове)

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

Ответ 11

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