Active item menu RoR

Question

Hello. How I can get active item menu? Menu generate in cycle

<ul id="menu">  
  <% for page in Page.roots %>  
    <li><%= link_to h(page.name), page %></li>    
  <% end %>
  </ul> 

I want use other css property for this item. Any ideas? Preferably js, jquery...

Answer 1

$("#menu a[href$='+location.pathname+']").addClass('current');

The selector #menu a will find all links in your menu. [href$='+location.pathname+'] this will find the link which ends with ($=) the same path as the current page, and than adds with .addClass('current') the css class current

Answer 2

There's link_to_unless_current which wraps the link into an a tag unless the link is the current page (shows just the text without a tag). With some CSS tricks you can make that into different appearance. I usually use this approach:

<ul id="menu"><%= Page.roots.map do |page|
  content_tag :li, link_to_unless_current(h(page.name), page)
end %></ul>

and the following CSS:

ul#menu li { ...current/selected appearance... }
ul#menu li a { ...linked/normal appearance... }

Answer 3

I tend to generate my own helper for this kind of thing:

#navigation_helper.rb
def nav_item(name, link, hilight = false)
  content_tag :li, link_to(name, link), :class => ("selected" if hilight)
end

Then in your views just pass a relevant boolean to the helper:

<ul id="menu">
  <%= nav_item "Foo admin", admin_path, (params[:controller] == "admin") %>
  <%= nav_item "Bar page", pages_path(@page), (params[:controller] == "pages" && params[:action] == "show" && params[:id] == @page.id) %>
  <%= nav_item "Baz example", example_path, any_old_helper? %>
</ul>

You'd need to think of a way of implementing this technique for your dynamically generated collection of pages, but where there's a will there's a way. :)