Dynamic menu ruby on rails and partial

Question

i'm pretty new to rails and would like some help with implementing a dynamic menu using partials.

As of right now, my code is as follows:

the menu partial:

.three.columns
  %ul#nav

    %li{:class => @active_page=="about" ? "active_page" : ""}
      %a{:href => "../pages/about"} About
    %li{:class => @active_page=="careers" ? "active_page" : ""}
      %a{:href => "../pages/careers"} Careers
    %li{:class => @active_page=="contact" ? "active_page" : ""}
      %a{:href => "../pages/contact"} Contact

the view:

  html...
  = render :partial => 'shared/aboutmenu_nav'
  more html...

the pages helper:

def @active_page(c) 
controller.action_name == c 
end

Note: active_page is the class that I would like to pass to the li if the user is on the corresponding page. For example, if the user is on the Contact page, the active_page class would be passed to only the Contact li element.

I've tried several solutions including creating multiple CSS versions and passing a class on the body corresponding with the page? for example,

%body{:class => @page_name}

and then defining @page_name in the pages_helper as follows:

 def page_name
    @path.parameterize('_') unless @path.blank?
  end

Neither of these versions seem to work, as the former (@active_page) does not yield any results. Similarly, I was unable to assign a class on the body tag--when I checked the source code, the body tag did not have any classes.

I'd appreciate any help on how to implement a dynamic menu using partials. If there is a method I have not tried please feel free to inform me. I sincerely appreciate all of your help, and I'm very thankful for your time! Thank you!

Using Kanadada's solution. The page literally displays the following text where the styled menu should appear:

<li class="">
<a href="/pages/about">About</a>
</li>
<li class="active_page">
<a href="/pages/careers">Careers</a>
</li>
<li class="">
<a href="/pages/contact">Contact</a>
</li>

This code would be great if it was in the source code; however, the source does not seem to recognize it... instead the source code shows the following code:

 <li class=""><a href="/pages/about">About</a></li><li class="active_page"><a href="/pages/careers">Careers</a></li><li class=""><a href="/pages/contact">Contact</a></li>

I suspect that it might have something to do with the way =top_menu is interpreted in HAML?

Answer 1

Add these methods to helpers/appalication_helper.rb

def active_menu?(path, path_right=request.path)
  (URI::parse(path).path == path_right) rescue false
end

def top_menu
  [
    "About",   "../pages/about", 
    "Careers", "../pages/careers", 
    "Contact", "../pages/contact"
  ].each_slice(2).map do |name, path|
    content_tag(:li, link_to(name, path), 
      :class => (active_menu?(path) ? "active_page" : ""))
  end.join('').html_safe
end

Now in your view:

.three.columns
  %ul#nav
    = top_menu

Note:

Use route helpers for path instead of hard coding them. Assuming you have a controller called PagesController, you can rewrite the top_menu method as follows:

def top_menu
  [
    "About",   about_pages_path, 
    "Careers", careers_pages_path, 
    "Contact", contact_pages_path
  ].each_slice(2).map do |name, path|
    content_tag(:li, link_to(name, path), 
      :class => (active_menu?(path) ? "active_page" : ""))
  end.join('').html_safe
end