penguin - Cómo diseñar un menú asp.net con CSS

penguin random house new york

Question

Estoy en el proceso de diseñar un menú asp.net y estoy tratando de entender el significado de los parámetros StaticSelectedStyle-CssClass y StaticHoverStyle-CssClass.

Según tengo entendido, los estilos definidos con estos parámetros se aplican como clases CSS a los elementos relevantes, siempre que sea necesario. Así que creé mi menú de la siguiente manera:

<asp:Menu ID="NavigationMenu" DataSourceID="NavigationSiteMapDataSource"
StaticMenuStyle-CssClass="StaticMenuStyle"
StaticMenuItemStyle-CssClass="StaticMenuItemStyle"
StaticSelectedStyle-CssClass="StaticSelectedStyle"
StaticHoverStyle-CssClass="StaticHoverStyle"
Orientation="Horizontal"
MaximumDynamicDisplayLevels="0"
runat="server">
</asp:Menu>

Funciona para StaticMenuStyle-CssClass y StaticMenuStyle-CssClass (las clases se aplican a los elementos relevantes), pero StaticSelectedStyle-CssClass y StaticHoverStyle-CssClass no se aplican, independientemente del estado seleccionado o activo de un elemento.

¿Qué se supone que debo hacer para que esto funcione?

Gracias.

EDIT: Lo siento, debería haber mencionado que esto es .NET 4. Aquí está el HTML generado:

<div id="NavigationMenu">
<ul class="level1 StaticMenuStyle">
<li><a class="level1 StaticMenuItemStyle selected" href="/Link.aspx">Link</a></li>
</ul>
</div>

Como puede ver, se aplican StaticMenuStyle y StaticMenuItemStyle, pero no StaticSelectedStyle-CssClass o StaticHoverStyle-CssClass. No estoy seguro de por qué. Sé que puedo usar select, pero no es el comportamiento esperado que se aplique StaticSelectedStyle-CssClass ??? Al utilizar seleccionados, hago suposiciones sobre lo que .NET hace entre bastidores y eso no es correcto.

Answer 1

Bien, obviamente no hay mucha gente que haya probado el menú .NET 4 a partir de hoy. No es sorprendente ya que la versión final fue lanzada hace un par de días. Parece que soy el primero en informar sobre lo que parece ser un error. Informaré a MS si encuentro el tiempo, pero dado el historial de MS de no haber prestado atención a los informes de errores, no estoy apurando esto.

De todos modos, en este punto, la peor solución es copiar y pegar los estilos CSS generados por el control (verifique el encabezado) en su propia hoja de estilo y modificarlo desde allí. Una vez que hayas terminado de hacer esto, no olvides configurar IncludeStyleBlock = "False" en tu menú para evitar la generación automática de CSS, ya que desde ahora usaremos el bloque copiado. Conceptualmente, esto no es correcto ya que su aplicación no debería confiar en el código generado automáticamente, pero esa es la única opción que se me ocurre.

Answer 2

Hay herramientas de terceros bien logradas, pero generalmente uso superfish http://www.conceptdevelopment.net/Fun/Superfish/ es genial, gratis y fácil;)

Answer 3

Intenté la solución de MikeTeeVee, aún no funciona, me refiero a que la pestaña seleccionada aún no cambia y mantiene un color diferente. Esta publicación resolvió mi problema: ¿ Establecer la clase CSS ''seleccionada'' en el menú de ASP.NET, los padres y sus hijos? Necesito poner el código en el código detrás.

Answer 4

Lo que hay que mirar es qué HTML está siendo escupido por el control. En este caso saca una tabla para crear el menú. El estilo de desplazamiento está establecido en el TD y, una vez que selecciona un elemento del menú, el control devuelve el mensaje y agrega el estilo seleccionado a la etiqueta A del enlace dentro del TD.

Así que tienes dos elementos diferentes que están siendo manipulados aquí. Uno es un elemento TD y otro es un elemento A. Por lo tanto, tienes que hacer que tu CSS funcione en consecuencia. Si agrego el CSS a continuación a una página con el menú, obtengo el comportamiento esperado del cambio de color de fondo en cualquier caso. Es posible que esté realizando una manipulación de CSS diferente que puede o no aplicarse a esos elementos.

<style>
.StaticHoverStyle
{
background: #000000;
}
.StaticSelectedStyle
{
background: blue;
}
</style>

Answer 5

Los mejores resultados que obtuve con este control roto implicaron no usar CSS, sino usar las propiedades de control integradas para el estilo (DynamicMenuItemStyle-BackColor, StaticHoverStyle-Width, etc.). Esta es una práctica terrible e infla su código, además de obligarlo a hacer esto para cada instancia del control.

Sin embargo, esto funciona.

Answer 6

Me encontré con el problema donde la clase de ''seleccionado'' no se estaba agregando a mi elemento del menú. Resulta que no puedes tener un NavigateUrl en él por cualquier razón.

Una vez que quité NavigateUrl, aplicé la clase css ''seleccionada'' a la etiqueta a y pude aplicar el estilo de fondo con:

div.menu ul li a.static.selected
{
background-color: #bfcbd6 !important;
color: #465c71 !important;
text-decoration: none !important;
}

Answer 7

No sé por qué todas las respuestas aquí son tan confusas. Encontré una bastante más simple. Use una clase css para el menú asp: digamos mainMenu y todos los elementos del menú debajo de esto serán "etiquetas" cuando se representen en HTML. Por lo tanto, solo debe proporcionar: propiedad flotante a esas "etiquetas" en su CSS. Vea a continuación el ejemplo:

<asp:Menu ID="mnuMain" Orientation="Horizontal" runat="server" Font-Bold="True" Width="100%" CssClass="mainMenu">
<Items>
<asp:MenuItem Text="Home"></asp:MenuItem>
<asp:MenuItem Text="About Us"></asp:MenuItem>
</Items>
</asp:Menu>

Y en el CSS, escribe:

.mainMenu { background:#900; }
.mainMenu a { color:#fff; }
.mainMenu a:hover { background:#c00; color:#ff9; }

Espero que esto ayude. :)

Answer 8

Puedes probar el estilo con LevelSubMenuStyles

 <asp:Menu ID="mainMenu" runat="server" Orientation="Horizontal"
StaticEnableDefaultPopOutImage="False">
<StaticMenuStyle CssClass="test" />
<LevelSubMenuStyles>
<asp:SubMenuStyle BackColor="#33CCFF" BorderColor="#FF9999"
Font-Underline="False" />
<asp:SubMenuStyle BackColor="#FF99FF" Font-Underline="False" />
</LevelSubMenuStyles>
<StaticMenuItemStyle CssClass="main-nav-item" />
</asp:Menu>

Answer 9

Recuerdo el atributo StaticSelectedStyle-CssClass utilizado para trabajar en ASP.NET 2.0. Y en .NET 4.0 si cambia el atributo "Tabla" del modo de representación del control del menú (por lo tanto, al hacer que el menú se muestre como sy sub-s como lo hizo en ''05) al menos escribirá su StaticSelectedStyle-CssClass específico en el html adecuado elemento.

Eso puede ser suficiente para que tu página funcione como tú quieres. Sin embargo, mi solución para el elemento de menú seleccionado en ASP 4.0 (al dejar RenderingMode en su valor predeterminado) es imitar la clase CSS "seleccionada" generada por el control, pero darme la declaración CSS "! Important" para que mis estilos tengan prioridad donde sea necesario .

Por ejemplo, de forma predeterminada, el control del menú representa un elemento "li" y un elemento secundario "a" para cada elemento del menú, y el elemento "a" del elemento del menú seleccionado contendrá la clase = "seleccionado" (entre otros nombres de clase de CSS generados por el control, incluido "static" si es un elemento de menú estático), por lo tanto, agrego mi propio selector a la página (o en un archivo de hoja de estilo separado) para etiquetas "estáticas" y "seleccionadas" a "como":

a.selected.static
{
background-color: #f5f5f5 !important;
border-top: Red 1px solid !important;
border-left: Red 1px solid !important;
border-right: Red 1px solid !important;
}

Answer 10

Siento tu dolor y perdí toda la noche / mañana tratando de resolver esto. Con pura fuerza bruta descubrí una solución. Llámelo una solución alternativa, pero es simple.

Agregue la propiedad CssClass a la declaración de su Control de Menú así:

<asp:Menu ID="NavigationMenu" DataSourceID="NavigationSiteMapDataSource"
CssClass="SomeMenuClass"
StaticMenuStyle-CssClass="StaticMenuStyle"
StaticMenuItemStyle-CssClass="StaticMenuItemStyle"
Orientation="Horizontal"
MaximumDynamicDisplayLevels="0"
runat="server">
</asp:Menu>

Simplemente extraiga los atributos StaticSelectedStyle-CssClass y StaticHoverStyle-CssClass, ya que simplemente no hacen jack.

Ahora crea el "SomeMenuClass", no importa lo que pongas en él. Debería verse algo como esto:

.SomeMenuClass
{
color:Green;
}

A continuación agregue las siguientes dos clases de CSS:

Para el estilo "Hover" añadir:

.SomeMenuClass a.static.highlighted
{
color:Red !important;
}

Para el estilo "seleccionado" agregue:

.SomeMenuClass a.static.selected
{
color:Blue !important;
}

Ahí, eso es todo. Estas hecho Espero que esto les salve a algunos la frustración que experimenté. BTW: Usted mencionó:

Parece que soy el primero en informar sobre lo que parece ser un error.

También pareció pensar que era un nuevo error de .NET 4.0. Encontré esto: http://www.velocityreviews.com/forums/t649530-problem-with-staticselectedstyle-and-statichoverstyle.html publicado en 2008 con respecto a Asp.Net 2.0. ¿Cómo somos las únicas 3 personas en el planeta quejándose de esto?

Cómo encontré la solución (estudie la salida HTML):

Aquí está la salida HTML cuando configuro StaticHoverStyle-BackColor = "Red":

#NavigationMenu a.static.highlighted
{
background-color:Red;
}

Esta es la salida HTML al configurar StaticSelectedStyle-BackColor = "Blue":

#NavigationMenu a.static.selected
{
background-color:Blue;
text-decoration:none;
}

Por lo tanto, la forma lógica de anular este marcado era crear clases para SomeMenuClass a.static.highlighted y SomeMenuClass a.static.selected

Notas especiales:

DEBE también usar " ! Important " en TODAS las configuraciones en estas clases porque la salida HTML usa " #Mavado de navegación ", y eso significa que cualquier estilo que Asp.Net decida incluir allí tendrá prioridad de herencia sobre cualquier otro estilo para el Menú de control con el ID " NavigationMenu ". Una cosa con la que luché fue con el relleno, hasta que descubrí que Asp.Net estaba usando " #NavigationMenu " para establecer el relleno izquierdo y derecho en 15em. Agregué " ! Important " a mis estilos SomeMenuClass y funcionó.

Answer 11

Solo quiero lanzar algo para ayudar a las personas que aún tienen este problema. (al menos para mí) el css muestra que coloca clases predeterminadas de nivel 1, nivel 2 y nivel 3 en cada parte del menú (el nivel 1 es el menú, el nivel 2 es el primer menú desplegable, el nivel 3 es la tercera ventana emergente). Ajuste del relleno en css

.level2
{
padding: 2px 2px 2px 2px;
}

funciona para agregar el relleno a cada li en el primer menú desplegable.