Cómo deshacerse de ugly asp: Menú parpadeo?

Question

estoy usando el control asp:Menu en una página ASP.NET 4.0 Webforms con el modo de renderizado sin tabla:

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

El menú tiene una fila horizontal principal con 5 o 6 elementos de menú y algunos de ellos abiertos verticales menús emergentes cuando el usuario se cierne sobre ellos.

A menudo, cuando se realiza una devolución de datos y la página se vuelve a renderizar, el menú "parpadea" por un momento (digamos, medio segundo) lo que significa: Todos los elementos del menú, incluidos los de los menús emergentes, se muestran en uno o más filas una después de la otra antes de que vuelvan al estado normal deseado.

En este breve momento de una visualización "desplegada" de todos los elementos del menú, el menú se ve COMO SI JavaScript se hubiera desactivado en el navegador. (Parece que la construcción de los menús emergentes se logra mediante el uso de Javascript en el control de menú asp:)

Este comportamiento es bastante feo, especialmente con un menú grande (representación por el momento corto de más de 2 o 3 filas) El contenido de la página completa se mueve hacia abajo antes de que salte a la pantalla normal.

¿Conoces alguna solución a este problema?

¡Gracias de antemano!

(Nota: Debo mencionar que utilicé el conocido control de menú compatible con CSS de CodePlex antes de actualizar a ASP.NET 4.0. Supuse que ya no necesito el control compatible con CSS porque el asp : El menú en la versión 4 ofrece un modo de representación de Lista incorporado ahora. Por lo que recuerdo, no tuve este parpadeo con el control compatible con CSS y creo que este control no utiliza Javascript. Quizás esto fue un error . paso Busco ahora para una solución sin tener que pasar de nuevo al control de menú CSS-amigable, si es posible)

Editar:.

Este parpadeo es inde navegador ent, aunque más notable en IE 8 y 7. En IE 7 (o modo de compatibilidad en IE 8) es extraordinariamente feo ya que los elementos del menú se muestran en un patrón de diagonal loco, incluso más de 5 o 6 filas.

Answer 1

Si alguien todavía necesita una solución; el parpadeo está allí porque debe establecer el estilo de visualización correcto en su CSS para el menú.

probar, por ejemplo

#menu ul li ul 
{ 
    display: none; 
} 

y

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

El parpadeo es porque el menú ASP.NET 4 utiliza javascript para establecer algunos estilos en línea.

Answer 2

La solución anterior estaba cerca, pero no funcionó para mí. Se requirió la ligera modificación a continuación para solucionar el problema que se describe. Cuando creo un nuevo proyecto de aplicación de formularios web ASP.NET utilizando Visual Studio 2010, el CSS que se genera para el menú utiliza de forma predeterminada ".menu" (clases CSS) para aplicar estilo en lugar de "#menú" (un elemento con ID de "menú").

#menu - no funciona

.Menú - ¿El trabajo

tanto, en otras palabras, poner esto en su archivo CSS en la parte inferior:

.menu ul li ul 
{ 
    display: none; 
} 

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

Answer 3

mismo problema estaba conmigo también. Pero resuelto quitando llamadas jquery. :) o puede descargar y mantener el archivo de script .js dentro de la carpeta de scripts en lugar de hacer referencia a él en línea.

Answer 4

También recogí este problema cada vez que pasaba mucho en la página entre el archivo CSS y el evento de carga, que presumiblemente desencadena el javascript para decorar los elementos del menú. Particularmente en IE8 esta demora para javascript para arreglar el estilo era fea.

Las soluciones de peter y Clearcloud8 fueron casi buenas para mí. Yo uso este:

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

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

La principal diferencia es que he usado "div.menu> ul> li", que se dirige únicamente la fila superior de los objetos, en lugar de "div.menu ul li", que afects la sub también menús - el resultado es que los elementos del submenú no tenían el mismo ancho, por lo que se desplegaron en una lista irregular.

(estoy usando Visual Studio 2010, .Net Framework 4)

Answer 5

#menu ul li ul 
{ 
    display: none; 
} 

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

Esto funcionó para mí también. No tuve problemas hasta que coloqué un ReCaptcha en el formulario. Mi menú también se producía en una página maestra. ¡Muchas gracias!

Answer 6

Añadir estas líneas al archivo Site.css (en la carpeta de estilos de su proyecto VS 2010)

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

Una alternativa es añadir SkipLinkText =”" para cada elemento del menú (no he probado esto)

Answer 7

Esto aparentemente funcionó (las sugerencias anteriores) hasta que simplemente actualicé mi jQuery a 2.1.1 usando Nuget y comencé a usar el CDN (sugerido por YSLow). Pero ahora ese parpadeo ha vuelto, peor que nunca. Cualquier persona verifique para ver hay una mejor solución? Gracias.

Yo también encontrado esta solución pero no hubo suerte: (en la cabeza)

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

Answer 8

De copiar a continuación el código de hojas de estilo y pegarlo dentro de la página Site.Master y se ejecuta perfecto y también eliminará el código de estilo de menú ..

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

Answer 9

añadí:

.menu ul li ul 
 
{ 
 
    display: none; 
 
} 
 

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

en el botton del archivo ccs y cuando publiqué la aplicación se redujo el efecto de parpadeo. Antes de los cambios, los elementos del menú cubrían casi toda la página y después de su solución solo 5 o 6 filas.

Esta es mi página principal:

<%@ 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>

y este es el archivo de ccs definitios para asp: menú (sin las nuevas líneas que me pega en el botton de archivo 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; 
 
}

Los elementos del menú se cargan desde un archivo xml.

Bueno, quiero agradecerles todas sus respuestas sobre "Cómo deshacerse del áspero asp: Menú titilando?" Continuaré investigando para encontrar una solución completa. ¡¡¡GRACIAS DE NUEVO!!!

Answer 10

Tuve el mismo problema desde el uso de ASP.NET 4.5.1 y aunque traté de usar las etiquetas de estilo CSS desde arriba, no pude evitar el parpadeo. Sin embargo, al comparar el código HTML de los sitios más antiguos con el nuevo, estaba claro que faltaba la etiqueta {display: none}. Yo simplemente me serví adaptando el web.config con

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

Esto ayudó, ya que produce la misma fuente HTML como anteriormente aunque no es sin duda una buena solución.

Answer 11

He intentado la solución recomendada que es ..

div.menu ul li ul { display:none } 
 

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

.. y funcionó para resolver el parpadeo, pero introduce otros problemas que es elementos de menú dentados.

La orientación de representación predeterminada del menú es vertical y el parpadeo solo se produce para los menús horizontales. El flotante: izquierda y posición: trabajo relativo al colapsar los elementos del menú en la posición de la celda izquierda con todos los elementos superpuestos en un área. Esto detiene la página saltando. El flotador: a la izquierda también reduce el tamaño del elemento del menú al del texto que contiene (problema del menú irregular).

Estas correcciones no son necesarias para los menús verticales.

La solución que funcione para mí es

div.menu { height:24px } 
 

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

Esto se consigue el mismo resultado y coloca todos los elementos de menú en un único espacio de la izquierda, donde se representará el menú, pero al no utilizando el flotador: a la izquierda deja los elementos del menú con su ancho predeterminado de automático. La altura del menú proporciona un espacio constante para el área del menú y se basa en la altura que uso para el menú estático horizontal.

Esta configuración no causa menús irregulares.