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

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

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

  

Funciona con 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 de desplazamiento de un elemento.

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

Gracias.

EDITAR: Perdón, debería haber mencionado que esto es .NET 4. Aquí está el HTML generado:

  

Como puede ver, se aplica StaticMenuStyle y StaticMenuItemStyle, pero no StaticSelectedStyle-CssClass o StaticHoverStyle-CssClass. No estoy seguro por qué. Sé que puedo usar seleccionado, pero no es el comportamiento esperado que se aplica StaticSelectedStyle-CssClass ??? Al usar selected hago suposiciones sobre qué hace .NET detrás de las escenas y eso no está bien.

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

Agregue la propiedad CssClass a la statement de su Control de menú así:

   

Solo deshazte de 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” agrega:

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

Para el estilo “Seleccionado” agrega:

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

Ahí, eso es todo. Ya terminaste Espero que esto les ahorre a algunos de ustedes la frustración que tuve. Por cierto: Usted mencionó:

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

También parecías 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 (estudio de la salida de HTML):

Aquí está el resultado HTML cuando configuro StaticHoverStyle-BackColor = “Red”:

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

Esta es la salida de HTML al establecer 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:

También DEBE usar ” ! Important ” en TODAS las configuraciones en estas clases porque el resultado HTML usa ” #NavigationMenu “, y eso significa que cualquier estilo que Asp.Net decida lanzar allí tendrá prioridad de herencia sobre cualquier otro estilo para el Control de menú con el ID ” NavigationMenu “. Una cosa con la que luché fue rellenar, hasta que descubrí que Asp.Net estaba usando ” #NavigationMenu ” para configurar el relleno izquierdo y derecho en 15em. Añadí ” ! Importante ” a mis estilos de SomeMenuClass y funcionó.

De acuerdo, 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 ser el primero en informar sobre lo que parece ser un error. Voy a informar esto a MS si encuentro el tiempo, pero dado el registro de seguimiento de MS de no prestar atención a los informes de errores, no me estoy apresurando.

De todos modos, en este punto, la solución menos importante es copiar y pegar los estilos CSS generados por el control (verifique el encabezado) en su propia hoja de estilo y modificarla desde allí. Una vez que haya terminado de hacer esto, no olvide configurar IncludeStyleBlock = “False” en su menú para evitar la generación automática de CSS, ya que a partir de ahora utilizaremos el bloque copiado. Conceptualmente, esto no es correcto, ya que su aplicación no debería depender del código generado automáticamente, pero esa es la única opción que se me ocurre.

Recuerdo el atributo StaticSelectedStyle-CssClass utilizado para trabajar en ASP.NET 2.0. Y en .NET 4.0 si cambia el atributo RenderingMode del menú “Table” (haciendo que muestre el menú como s y sub-s como lo hizo en ’05), al menos escribirá su StaticSelectedStyle-CssClass especificado en el html apropiado. elemento.

Eso puede ser suficiente para que tu página funcione como quieras. 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 de CSS “seleccionada” generada por el control pero dar a la mina la statement CSS “importante” para que mis estilos prevalezcan donde sea necesario .

Por ejemplo, de forma predeterminada, el control de menú representa un elemento “li” y el elemento secundario “a” para cada elemento del menú y el elemento “a” del elemento de menú seleccionado contendrá class = “selected” (entre otros nombres de clases de CSS generados por 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 tags “estáticas” y “seleccionadas” “a” como las siguientes:

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

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

Una vez que eliminé NavigateUrl, apliqué 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; } 

Solo quiero agregar algo para ayudar a las personas que todavía tienen este problema. (al menos para mí), el CSS muestra que pone clases predeterminadas de nivel1, nivel2 y nivel3 en cada parte del menú (el nivel 1 es el menú, el nivel2 es el primer menú desplegable, el nivel3 es el tercer elemento emergente). Configurar el relleno en css

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

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

Probé la solución de MikeTeeVee, todavía no funciona, me refiero a que la pestaña seleccionada aún no cambia y conserva un color diferente. Esta publicación resolvió mi problema: ¿ Configurar la clase CSS ‘seleccionada’ en el menú ASP.NET padres y sus hijos? Necesita poner el código en el código detrás.

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

Entonces tienes dos elementos diferentes que están siendo manipulados aquí. Uno es un elemento TD y otro es un elemento A. Entonces, debes hacer que tu CSS funcione en consecuencia. Si agrego el siguiente CSS a una página con el menú, en ambos casos obtengo el comportamiento esperado del cambio de color de fondo. Puede estar haciendo una manipulación de CSS diferente que puede o no aplicarse a esos elementos.

  

No sé por qué todas las respuestas aquí son tan confusas. Encontré uno bastante más simple. Utilice una clase css para el menú asp: menú, por ejemplo, mainMenu y todos los elementos del menú debajo de esta serán “tags” cuando se procesen en HTML. Por lo tanto, solo tiene que proporcionar: propiedad de desplazamiento a esas “tags” en su CSS. Vea a continuación para el ejemplo:

       

Y en el CSS, escribe:

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

Espero que esto ayude. 🙂

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

Sin embargo, esto funciona.

Puedes probar el estilo con LevelSubMenuStyles

          

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