ansaurus

Question

ASP.Net MVC: How can I easily change the tab color of my navigation menu based on the tab that I'm on?

Answer 1

+2 A:

Assign a unique id to the body element of each page (e.g. <body id="users">). In ASP.NET MVC you could have the body tag in your master page written like:

<body id="<%= ViewData["bodyId"] %>">

And in the Controller methods for each page put something like ViewData["bodyId"] = "users"; to dynamically assign the id for each page.

Then in your nav markup, assign a class with the same name on the <a> tag that links to that page:

<ul>
    <li><a href="/users" class="users">Users</a></li>
    <li><!-- more links --></li>
</ul>

Then in the css do something like this:

body#users a.users, body#another-page a.another-page {
    /* include rules for how you want the current page tab to appear */
}

That will assign your "current page" styles to any link tag with a class that matches the body tag id.

Bryan 2009-12-08 07:43:56

Answer 2

+2 A:

Further to what Bryan mentioned, I usually add a "CssClass" property to my view model in cases like this. It's also useful for the situation where the calculation of the CssClass is a little complex (since it can be tested in a VM).

Richard Szalay 2009-12-08 07:59:32

ansaurus

tags:

views:

answers:

ASP.Net MVC: How can I easily change the tab color of my navigation menu based on the tab that I'm on?

related questions