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

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

16 голосов
/ 13 июля 2010

Я использую элемент управления 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 строках.

Ответы [ 12 ]

0 голосов
/ 02 июля 2014

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

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

<style type="text/css">
                div.menu ul li ul { display:none; }
    </style>
0 голосов
/ 12 сентября 2011

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

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

.menu - работает

Другими словами, поместите это в свой CSS-файл в нижней части: 

.menu ul li ul
{
    display: none;
}

.menu ul li 
{
    position: relative; 
    float: left;
    list-style: none;
}
Страница:
...