Página activa en el menú de navegación CSS con imágenes de fondo para efecto de desplazamiento en MVC3

He hecho un menú simple en HTML. Funciona (casi) perfectamente. Los elementos del menú son, como puede ver, enlaces con imágenes de fondo configuradas en CSS. Al pasar el mouse por encima, se muestra otra imagen de fondo.

Mi problema es que no puedo encontrar una solución funcional para configurar un elemento de menú constantemente "elegido", o dicho de otra manera, no quiero mostrar la página real en el menú.

Primero, mostraré el HTML y el CSS. Después mostraré lo que he intentado hacer.

<div id="menu">
    <a href="@Url.Action("Index","Produkter")" id="menu_produkter"></a>
    <a href="@Url.Action("Index", "Galleri")" id="menu_galleri"></a>
    <a href="@Url.Action("Index", "Kontakt")" id="menu_kontakt"></a>
</div>

CSS tiene este aspecto:

#menu_produkter 
{
    display: block;
    position: absolute;
    background: url(images/menu_produkter.png) no-repeat;
    width: 108px;
    height: 26px;
    margin-left: 376px;
    margin-top: 52px;
}

#menu_produkter:hover {
    background: url(images/menu_produkter_hover.png) no-repeat;
    cursor: pointer;
}

#menu_galleri {
    display: block;
    position: absolute;
    background: url(images/menu_galleri.png) no-repeat;
    width: 64px;
    height: 26px;
    margin-left: 496px;
    margin-top: 52px;
}

#menu_galleri:hover {
    background: url(images/menu_galleri_hover.png) no-repeat;
    cursor: pointer;
}

#menu_kontakt {
    display: block;
    position: absolute;
    background: url(images/menu_kontakt.png) no-repeat;
    width: 85px;
    height: 26px;
    margin-left: 572px;
    margin-top: 52px;
}

#menu_kontakt:hover {
    background: url(images/menu_kontakt_hover.png) no-repeat;
    cursor: pointer;
}

He intentado agregar identificaciones de CSS para cada elemento llamado #menu_xxxx_on con las mismas imágenes de fondo que las identificaciones ": hover".

Luego configuro ViewBag.CurrentPage = "xxxx" en la parte superior de mis vistas. Finalmente uso Razor para verificar qué página es la actual:

$<a href="@Url.Action("Index", "Produkter")" id="menu_produkter@{if(ViewBag.CurrentPage.Equals("Salonen")) {<text>_on</text>}}"></a>*

Esperaba que funcionara, pero en cambio, el elemento del menú desaparece por completo. He intentado 'Inspeccionar elemento' con Google Chrome para averiguar qué está mal. Parece que restablece todas las propiedades de CSS.

¿Hay alguna solución fácil para esto, o tengo que hacerlo de otra manera? He visto otras soluciones con html-helpers personalizados, pero creo que es un poco exagerado si puedo hacerlo de esta manera.

Gracias de antemano.

preguntado el 28 de agosto de 12 a las 10:08

Quizás alguien me pueda ayudar con una solución hecha con jQuery. Si agrego nuevas identificaciones para cada elemento del menú como: #menu_kontakt_current { } ¿Es posible eliminar la identificación del elemento del menú 'actual' con removeAttr('id') y luego agregar la nueva identificación para el siguiente elemento del menú 'actual'? ? ¿Alguien puede ayudarme a hacer el truco? -

Ahora he encontrado una solución. Simplemente cambió las identificaciones a clases en CSS y usó exactamente el mismo método que describí. Ahora funciona. -

1 Respuestas

Si desea resolverlo con clases, use funciones jQuery, por ejemplo:

$(function(){
var id = $('hiddenId').val();
 $('#'+id).addClass("someClass");
});

En someClass, defina el estilo de pestaña de menú elegido.

Id del menú elegido que puede enviar usando ViewBag y renderizarlo en hiddenField con id: hiddenId

@Html.Hidden("hiddenId",(object)ViewBag.CurrentPage)

Pero sugiero manipular con innerHtml, luego la función jQuery debería verse así:

$(function(){
    var id = $('hiddenId').val();
    var header =  $('#'+id).html();
    $('#'+id).html(header+'-on');
    });

Respondido 30 ago 12, 13:08

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.