asp.net - tag - ¿Cómo deshacerse de asp feo: menú parpadeante?
route controller net core (12)
Estoy utilizando el control asp:Menu en una página de formularios web ASP.NET 4.0 con modo de representación sin tablas:
<asp:Menu ID="MenuBase" runat="server" DataSourceID="SiteMapDataSourceMenu"
Orientation="Horizontal" CssClass="contentmenu" RenderingMode="List"
IncludeStyleBlock="false">
</asp:Menu>
El menú tiene una fila principal horizontal con 5 o 6 elementos de menú y algunos de ellos abren menús emergentes verticales cuando el usuario se desplaza sobre ellos.
A menudo, cuando ocurre una devolución de datos y la página vuelve a mostrarse, el menú "parpadea" por un momento (por ejemplo, medio segundo), lo que significa que: todos los elementos del menú, incluidos los elementos en los menús emergentes, se muestran en una o más filas una después de entre sí antes de que vuelvan al estado normal previsto.
En este breve momento de visualización "desplegada" de todos los elementos del menú, el menú se ve COMO SI Javascript ha sido deshabilitado 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 (que se representa durante un breve periodo de tiempo en 2 o 3 filas) y el contenido de toda la página se mueve hacia abajo antes de que salte a la visualización normal.
¿Conoces alguna solución para 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 asp: Menu en la versión 4 ofrece un modo de representación de lista integrado ahora. Por lo que recuerdo, no tuve este parpadeo con el control compatible con CSS y creo que este control no utiliza Javascript. Tal vez fue un mal paso. Ahora busque una solución sin volver al control de menú compatible con CSS, si es posible.)
Editar:
Este parpadeo es independiente del navegador, aunque es más notorio en IE 8 y 7. En IE 7 (o en el modo de compatibilidad en IE 8) es extraordinariamente feo, ya que los elementos del menú se muestran en un patrón diagonal loco incluso en 5 o 6 filas.
Agregue estas líneas al archivo Site.css (en la carpeta de estilos de su proyecto de VS 2010)
/* Fix for extra space above menu in Chrome and Safari */
img[alt=''Skip Navigation Links''] {
display: none;
}
Una alternativa es agregar SkipLinkText = "" a cada elemento del menú (no lo he probado)
Aparentemente, esto funcionó (las sugerencias anteriores) hasta que 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. ¿Alguien comprueba para ver si hay una mejor solución? Gracias
También encontré esta solución pero no tuve suerte: (en la cabeza)
<style type="text/css">
div.menu ul li ul { display:none; }
</style>
Copia el código de la hoja de estilo a continuación y lo pega en la página site.master y se ejecuta a la perfección, y también elimina el código de estilo del 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>
El mismo problema fue conmigo también. Pero resuelto eliminando las llamadas jquery. :) o puede descargar y mantener el archivo de script .js dentro de la carpeta del script en lugar de hacer referencia a él desde la línea.
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 introdujo otro problema que es elementos de menú irregular.
La orientación de representación predeterminada del menú es vertical y el parpadeo solo se produce en 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 el área. Esto detiene la página saltando. El float: left 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 me funciona es
div.menu { height:24px }
div.menu li { right:0; position:absolute; top:0 }
Esto logra el mismo resultado y coloca todos los elementos del menú en un solo espacio a la izquierda donde se representará el menú, pero al no usar el flotador: a la izquierda, deja los elementos del menú con su ancho predeterminado de auto. 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.
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 con Visual Studio 2010, el CSS que se genera para el menú de forma predeterminada hace uso de ".menu" (clases CSS) para aplicar estilo en lugar de "#menu" (un elemento con ID de "menu").
#menu - no funciona
.menu - funciona
Entonces, en otras palabras, ponga esto en su archivo CSS cerca de la parte inferior:
.menu ul li ul
{
display: none;
}
.menu ul li
{
position: relative;
float: left;
list-style: none;
}
Probé las ideas anteriores (con variaciones) y algunas repararon la representación impar (el parpadeo, por así decirlo), pero todas causaron regresiones (por ejemplo, submenús que se renderizarían demasiado lejos y volarían cuando te muevas).
Inspirado por una idea en otro hilo, probé algo diferente: esconder el menú inicialmente y mostrarlo una vez que la página se haya cargado.
Paso a paso: tengo una clase invisible invButton que ya tenía y la uso para ocultar botones, etc.
<style type="text/css">
.invButton {
height: 0;
width: 0;
visibility: hidden;
display: none;
border-style: none;
border-width: 0;
}
</style>
A continuación, establezco la CssClass del menú de parpadeo ofensivo en CssClass = "invButton", por lo que comienza invisible.
<asp:Menu runat="server" ID="Menu1" ... CssClass="invButton" ... RenderingMode="List" />
Finalmente, una vez que la página encuentre ''$ (document) .ready'', elimino la clase.
<script type="text/javascript">
$(document).ready(function () {
$(''#ctl00_Menu1'').removeClass(''invButton'');
});
</script>
En pocas palabras, el menú se reproduce bien en el formato correcto y no hay parpadeo extraño al cargarse.
Si alguien todavía necesita una solución; el parpadeo está ahí porque debe configurar el estilo de visualización correcto en su css para el menú.
Prueba por ejemplo
#menu ul li ul
{
display: none;
}
y
#menu ul li
{
position: relative;
float: left;
list-style: none;
}
El parpadeo se debe a que el menú ASP.NET 4 usa javascript para establecer algunos estilos en línea.
También detecté este problema cada vez que pasaba mucho en la página entre el archivo CSS y el evento onload que presumiblemente activa el javascript para decorar los elementos del menú. Particularmente en IE8, este retraso de javascript para arreglar el estilo era feo.
Las soluciones de Peter y Clearcloud8 fueron casi buenas para mí. Yo uso esto:
div.menu > ul > li
{
display: inline-block;
list-style: none;
}
div.menu ul li ul
{
display: none;
}
La diferencia principal es que usé "div.menu> ul> li", que se dirige solo a la fila superior de elementos, en lugar de "div.menu ul li", que también afecta a los submenús; el resultado es que los elementos del submenú eran no tienen el mismo ancho, por lo que cayeron en una lista irregular.
(Estoy usando Visual Studio 2010, .Net Framework 4)
Tuve el mismo problema desde que usé ASP.NET 4.5.1 y aunque intenté usar las etiquetas de estilo CSS desde arriba, no pude evitar el parpadeo. Sin embargo, al comparar la fuente HTML de los sitios más antiguos con el nuevo, estaba claro que faltaba la etiqueta {display: none}. Simplemente me ayudé adaptando el web.config con
<pages controlRenderingCompatibilityVersion="3.5" clientIDMode="AutoID">
Esto ayudó, ya que produjo la misma fuente HTML que anteriormente, aunque seguramente no es una buena solución.
Yo añadí:
.menu ul li ul
{
display: none;
}
.menu ul li
{
position: relative;
/*float: left;*/
list-style: none;
}
en la parte inferior 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 maestra:
<%@ 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 ccs definitios para asp: menu (sin las nuevas líneas que pego en el boton del 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 agradecerte por todas tus respuestas sobre "¿Cómo deshacerte de asp feo: el menú parpadea?" Seguiré investigando para encontrar una solución completa. ¡¡¡GRACIAS DE NUEVO!!!
#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 ningún problema hasta que coloqué un reCaptcha en el formulario. Mi menú estaba siendo producido dentro de una página maestra también. ¡Muchas gracias!