2

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.

2
  • Maybe someone can help me with a solution made with jQuery. If I add new id's for each menu item like: #menu_kontakt_current { } Is it possible to remove the id from the 'current' menu item with removeAttr('id') and then add the new id for the next 'current' menu item? Can someone help me do the trick?
    – thbaan
    Aug 28, 2012 at 10:55
  • I have now found a solution. Simply changed id's to classes in CSS and used exact same method as I described. Now it's working.
    – thbaan
    Aug 28, 2012 at 11:08

1 Answer 1

0

If you want solve it with classes then use jQuery functions for example :

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

In someClass define your chosen menu tab style.

Id of chosen menu you can send using ViewBag and render it in hiddenField with id : hiddenId

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

But I suggest manipulate with innerHtml, then jQuery function should look like this :

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.