Highlight tab in menu

Question

Hi all,

I have a menu which is a ul

Home | Calendar | Settings

I want to highlight (via a css class) the selected tab in the menu.

Some links (Home and Calendar) also have subselections

Home | *Calendar* | Settings 
------------------------- 
Add event | Edit event

Ofcourse when edit event is selected, Calendar should still be highlighted.

how can I best approach this using rails and css?

Thanks, Stijn

Answer 1

The simplest way would be to check which controller is being used. I made up controller names, so of course you would replace 'home', 'calendar', and 'settings' with the correct names.

<ul>
  <li class="<%= "highlighted" if params[:controller] == "home" %>">Home</li>
  <li class="<%= "highlighted" if params[:controller] == "calendar" %>">Calendar</li>
  <li class="<%= "highlighted" if params[:controller] == "settings" %>">Settings</li>
</ul>

Answer 2

May be this well better

<ul>
  <li<%=' class="highlighted"' if params[:controller] == "home" %>">Home</li>
  <li<%=' class="highlighted"' if params[:controller] == "calendar" %>">Calendar</li>
  <li<%=' class="highlighted"' if params[:controller] == "settings" %>">Settings</li>
</ul>