StaticSelectedStyle-CssClass no funciona

Question

Estoy incrementando una aplicación Web ASP.NET 4.0 en el que tengo un control de menú de la siguiente manera:

#menu { 
     width: 940px; 
     height: 36px; 
     margin: 0 auto; 
     padding: 0; 
    } 

    #menu ul { 
     margin: 0px 0px 0px 10px; 
     padding: 0; 
     list-style: none; 
     line-height: normal; 
    } 

    #menu li { 
     float: left; 
    } 

    #menu a { 
     display: block; 
     height: 26px; 
     margin-right: 2px; 
     margin-bottom: 10px; 
     padding: 10px 20px 0px 20px; 
     text-decoration: none; 
     text-align: center; 
     text-transform: uppercase; 
     font-family: Arial, Helvetica, sans-serif; 
     font-size: 11px; 
     font-weight: bold; 
     color: #FFFFFF; 
     border: none; 
    } 

    #menu a:hover, .selectedMenuItem { 
     background: #FFFFFF; 
     text-decoration: none; 
     color: #333333; 
    } 


    <asp:Menu ID="menu" runat="server" StaticSelectedStyle-CssClass="selectedMenuItem"> 
    <Items> 
     <asp:MenuItem Text="Home" Selected="true" NavigateUrl="~/Home.aspx"></asp:MenuItem> 
     <asp:MenuItem Text="About Us" NavigateUrl="~/AboutUs.aspx"></asp:MenuItem> 
     <asp:MenuItem Text="Services" NavigateUrl="~/Services.aspx"></asp:MenuItem> 
     <asp:MenuItem Text="Contact" NavigateUrl="~/Contact.aspx"></asp:MenuItem> 
    </Items> 
    </asp:Menu> 

Quiero que el elemento de menú seleccionado para ser de estilo de acuerdo a la clase css selectedMenuItem pero por alguna razón eso no sucede. ¿Como puedo solucionar este problema?

Answer 1

¿Has visto tu fuente de borwser para asegurarte de que ASP.NET no cambiaba el nombre dinámicamente de tu valor de ID de control de menú?

Answer 2

Tuve el mismo problema y traté de averiguar qué sucedió. En el código fuente de la página html-thje encontré esto:

<div class="menu" id="NavigationMenu"> 
    <ul class="level1"> 
     <li><a class="level1" href="../Default.aspx">Start</a></li> 
     <!-- more li items with the same class --> 
    </ul> 

me espera mi nombre CssClass pero encontró level1 lugar. Si cambié mi CSS a:

#NavigationMenu .level1 li 
{ 
    padding: 10px; 
} 

funcionó. Probablemente no sea la forma correcta de hacerlo, pero es una solución al problema en cuestión. Probablemente no es adecuado en un servidor de producción, por desgracia

Answer 3

1- Definir .selectedMenuItem clase como abajo, independiente de Identificación (#menu)

.selectedMenuItem { 
     background: #FFFFFF; 
     text-decoration: none; 
     color: #333333; 
} 

2- Uso método addClass de jQuery, que se unen método para el evento click de los elementos del menú.

http://api.jquery.com/addClass/

Answer 4

Usted puede manejar esto desde código subyacente en el caso de Page_Load el archivo maestro. Por ejemplo, puede usar el método Request.Path para obtener la ruta actual de la página y luego usar una instrucción switch o if para agregar manualmente el estilo al MenuItem correspondiente.

Answer 5

simplemente agregue este css en la hoja de estilo para mostrar la pestaña activa con imagen de fondo o también agregue color activo de fondo sin necesidad de hacer ningún cambio en el control de menú y agregue cualquier estilo estático o dinámico en el menú.

.menu a.static.selected 
{ 
background: url("../images/bg.jpg") repeat scroll 0 0; 
color: white;`` 
text-decoration: none; 
} 
.menu li a.dynamic.selected 
{ 

background: url("../images/bg.jpg") repeat scroll 0 0; 
color: white; 
text-decoration: none; 
}