Comment se débarrasser de laid asp:Menu scintillement?
j'utilise le asp:Menu contrôle sur un ASP.NET 4.0 page Webforms avec le mode de rendu sans table:
<asp:Menu ID="MenuBase" runat="server" DataSourceID="SiteMapDataSourceMenu"
Orientation="Horizontal" CssClass="contentmenu" RenderingMode="List"
IncludeStyleBlock="false">
</asp:Menu>
le menu a une ligne principale horizontale avec 5 ou 6 éléments de menu et certains d'entre eux ouvrent les menus contextuels verticaux lorsque l'utilisateur plane sur eux.
souvent quand un postback se produit et la page est rendue à nouveau le menu "clignote" pour un moment (disons, une demi-seconde) qui signifie: Tous les éléments de menu-y compris les éléments dans les menus contextuels - sont affichés dans un ou plusieurs rangées l'une après l'autre avant de revenir à l'état normal prévu.
dans ce court instant d'affichage "déplié" de tous les éléments du menu, le menu semble avoir été désactivé dans le navigateur. (Il semble que la construction des menus contextuels est réalisée en utilisant du Javascript dans le contrôle asp:menu.)
ce comportement est assez laid, surtout avec un grand menu (rendu pour le court moment sur 2 ou 3 lignes) le contenu de toute la page est déplacé vers le bas avant il saute de nouveau à l'écran normal.
connaissez-vous une solution pour ce problème?
Merci à l'avance!
<!-(Remarque: je dois mentionner que j'ai utilisé le contrôle de menu CSS-friendly bien connu de CodePlex avant de passer à ASP.NET 4,0. Je suppose que je n'ai plus besoin de la commande CSS-friendly car le menu asp:dans la version 4 offre maintenant un mode de rendu de liste intégré. Pour autant que je me souvienne, je n'ai pas eu ce clignotement avec le contrôle CSS-friendly et je pense que ce contrôle ne fait pas usage de Javascript. Peut-être que c'était une mauvaise étape. Je suis à la recherche d'une solution sans revenir à la commande CSS-friendly menu, si possible.)Edit:
ce clignotement est indépendant du navigateur, bien que le plus visible dans IE 8 et 7. Dans IE 7 (ou le mode de compatibilité dans IE 8) c'est extraordinaire laid puisque les éléments de menu s'affichent dans un motif diagonal fou même sur 5 ou 6 lignes.
12 réponses
si quelqu'un a encore besoin d'une solution; le clignotement est là parce que vous devez définir le style d'affichage correct dans votre css pour le menu.
Essayez, par exemple,
#menu ul li ul
{
display: none;
}
et
#menu ul li
{
position: relative;
float: left;
list-style: none;
}
le scintillement est dû au fait que ASP.NET 4 menu utilise javascript pour définir certains styles en ligne.
j'ai également relevé ce problème chaque fois que j'ai eu beaucoup de choses en cours dans la page entre le fichier CSS et l'événement onload qui déclenche probablement le javascript pour décorer les éléments du menu. En particulier dans IE8 ce délai pour javascript pour corriger le style était laid.
les solutions de peter et Clearcloud8 étaient presque bonnes pour moi. J'utilise ceci:
div.menu > ul > li
{
display: inline-block;
list-style: none;
}
div.menu ul li ul
{
display: none;
}
La principale différence étant que j'ai utilisé "div.menu > ul > li" qui ne vise que la rangée la plus haute d'articles, au lieu de "div.menu ul li " qui affecte les sous-menus aussi - le résultat étant que les éléments de sous-menu n'étaient pas la même largeur, de sorte qu'ils ont chuté dans une liste découpée.
(J'utilise Visual Studio 2010, .net Framework 4)
Ajouter ces lignes dans le Site.fichier css (dans le dossier Styles de votre projet VS 2010)
/* Fix for extra space above menu in Chrome and Safari */
img[alt='Skip Navigation Links'] {
display: none;
}
une alternative est d'ajouter SkipLinkText="" à chaque élément de menu (n'ont pas testé cela)
j'ai essayé la solution recommandée qui est ..
div.menu ul li ul { display:none }
div.menu ul li { position:relative; float:left; list-style:none }.. et cela a fonctionné pour résoudre le scintillement, mais a introduit un autre problème qui est jagged éléments de menu.
l'orientation par défaut du rendu du menu est verticale et le clignotement ne se produit que pour les menus horizontaux. Le flotteur: à gauche et la position: travail relatif en repliant les éléments du menu dans la position de la cellule de gauche avec tous les éléments superposés dans la même zone. Ceci arrête la page sauter autour. Le float: left réduit également la taille de l'élément de menu à celle du texte qu'il contient (problème de menu découpé).
ces corrections ne sont pas nécessaires pour les menus verticaux.
La solution qui fonctionne pour moi est
div.menu { height:24px }
div.menu li { right:0; position:absolute; top:0 }cela permet d'obtenir le même résultat et place tous les éléments du menu dans un seul espace à gauche où le menu sera rendu mais en n'utilisant pas le float:left il laisse les éléments du menu avec leur largeur par défaut d'auto. Le la hauteur du menu fournit un espace constant pour la zone du menu et est basée sur la hauteur que j'utilise pour le menu statique horizontal.
ce paramètre ne provoque pas de menus irréguliers.
j'ai ajouté:
.menu ul li ul
{
display: none;
}
.menu ul li
{
position: relative;
/*float: left;*/
list-style: none;
}à botton du fichier ccs et quand j'ai publié l'application l'effet de scintillement a été réduit. Avant les changements, les éléments du menu couvraient presque toute la page et après votre solution seulement 5 ou 6 lignes!!!.
C'est maître de ma page:
<%@ 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>et c'est le fichier ccs definitios pour asp:menu (sans les nouvelles lignes que je colle à botton de ccs fichier):
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;
}les éléments du menu sont chargés à partir d'un fichier xml.
Eh bien, je tiens à vous remercier pour toutes vos réponses sur "comment se débarrasser de laid asp:Menu flickering?"Je vais continuer à chercher une solution complète. MERCI ENCORE!!!
#menu ul li ul
{
display: none;
}
and
#menu ul li
{
position: relative;
float: left;
list-style: none;
}
Cela a fonctionné pour moi aussi. Je n'avais pas de problème jusqu'à ce que je place un reCaptcha sur le formulaire. Mon menu était aussi produit dans une page principale. Merci beaucoup!
j'ai eu le même problème depuis l'utilisation ASP.NET 4.5.1 et bien que j'aie essayé d'utiliser les étiquettes de style CSS venant d'en haut, je n'ai pas pu empêcher le scintillement. Cependant, en comparant la source HTML des sites plus anciens à la nouvelle, il était clair que la balise {display: none} manquait. Je me suis simplement aidé en adaptant le web.config
<pages controlRenderingCompatibilityVersion="3.5" clientIDMode="AutoID">
cela a aidé car il a produit la même source HTML que précédemment, bien que ce ne soit sûrement pas une bonne solution.
La solution ci-dessus est proche, mais ne fonctionne pas pour moi. Elle a nécessité la légère modification ci-dessous afin de corriger le problème décrit. Quand je crée un nouveau ASP.NET projet de demande de formulaires web en utilisant Visual Studio 2010, le CSS qui est généré pour le menu par défaut fait usage de ".menu" (CSS classes) pour appliquer le style plutôt que "#menu" (un élément avec L'ID de "menu").
# menu - ne fonctionne pas
.menu
- faire travail
donc, en d'autres termes, mettez ceci dans votre fichier CSS près du bas:
.menu ul li ul
{
display: none;
}
.menu ul li
{
position: relative;
float: left;
list-style: none;
}
cela a apparemment fonctionné (les suggestions ci-dessus) jusqu'à ce que je mette à jour mon jQuery en 2.1.1 en utilisant nuget et commence à utiliser le CDN (suggéré par YSLow). Mais maintenant que le scintillement est de retour, pire que jamais. Quelqu'un vérifie s'il y a une meilleure solution? Merci.
j'ai aussi trouvé cette solution mais pas de chance: (dans la tête)
<style type="text/css">
div.menu ul li ul { display:none; }
</style>
vous copiez le code de feuille de style ci-dessous et le collez dans le site.master page et il Exécuter perfect et aussi supprimer votre code de style de menu..
<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>
j'ai essayé les idées ci-dessus (avec des variations) et certains ont corrigé le rendu étrange (le clignotement pour ainsi dire) mais ils ont tous causé des régressions (exemple de sous-menu qui rendraient trop loin et s'envoleraient quand vous vous déplacez vers eux).
inspiré par une idée sur un autre fil, j'ai essayé quelque chose de différent: cacher le menu initialement et le dévoiler une fois la page chargée.
étape par étape: j'ai une classe invbutton invisible que j'ai déjà eu et que j'utilise pour cacher des boutons, etc.
<style type="text/css">
.invButton {
height: 0;
width: 0;
visibility: hidden;
display: none;
border-style: none;
border-width: 0;
}
</style>
ensuite, j'ai mis la classe CSS du menu offensif flickering en CssClass= "invButton", donc ça commence invisible.
<asp:Menu runat="server" ID="Menu1" ... CssClass="invButton" ... RenderingMode="List" />
enfin, une fois que la page atteint '$(document).ready " je supprimer la classe.
<script type="text/javascript">
$(document).ready(function () {
$('#ctl00_Menu1').removeClass('invButton');
});
</script>
Voila, menu rend bien dans le format correct et pas étrange scintillement à charger.