I have made a simple menu in HTML. It works (almost) perfectly. The menu items are, as you can see, links with background images set in CSS. At mouse-over another background image is shown.
My problem is, that I cannot find a working solution for setting a menu item constantly "chosen" - or said in another way, I wan't to show the actual page in the menu.
First, I will show the HTML and CSS. Afterwards I will show what I have tried to do.
<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 looks like this:
#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;
}
I have tried to add CSS id's for each item called #menu_xxxx_on with the same background images as the ":hover" id's.
Then I set ViewBag.CurrentPage = "xxxx" in the top of my views. Finally I use Razor to check which page is the current:
$<a href="@Url.Action("Index", "Produkter")" id="menu_produkter@{if(ViewBag.CurrentPage.Equals("Salonen")) {<text>_on</text>}}"></a>*
I hoped it would work - but instead the menu item totally disappears. I have tried to 'Inspect element' with Google Chrome to find out whats wrong. It seems like it resets all CSS-properties.
Is there any easy solution to this - or do I have to do it another way? I have seen other solutions with custom html-helpers - but I think it's a bit overkill if I can do it this way.
Thank you in advance.