CODEWITHSUNDEEP
ruby-on-railsruby-on-rails-3
donald
donald

Reputation: 23737

Rails 3 - Dynamic Menu Item

I have an HTML menu in a partial and I want to make the menu items dynamic (changing colors) depending on which page we are at. How can I do that?

Thanks

Upvotes: 0

Views: 1590

Answers (3)

Konstantinos Pachnis
Konstantinos Pachnis

Reputation: 1

I had the same problem and I created to helper methods to set the active menu item.

  def active_tab(id)
    if id == menu_entry_id
      'active'
    else
      'tab'
    end
  end

  def menu_entry_id
    if controller_path.match('/')
      controller_path.gsub!('/', '_')
    else
      controller_path
    end
  end

Example menu

%li{:class => "#{active_tab 'admin_dashboard'}"}= link_to 'Dashboard', admin_dashboard_path
%li{:class => "#{active_tab 'admin_customers'}"}= link_to 'Customers', admin_customers_path

As you can see in the active_tab I pass the expected result from the controller_path (/ is replaced with _). The active_tab compares its input with the result of controller_path and returns active it both much or just tab.

I guess there might be other ways to do it, but I could not come up with something better.

Upvotes: 0

Scott
Scott

Reputation: 17247

A common trick that is used to alter the appearance of menus to reflect the current page is to put a CSS selector or class that reflects the page name in the body tag.

Once you've done that, you can create different styles for each variation of page name that you want.

For example:

<!-- @page_name is 'home' in this example -->
<body class="<%= @page_name %>">

  <!-- Lots of html here -->

  <div class="nav_links">
    <ul id="nav">
      <li class="home"><a href="/"><span>Home</span></a></li>
      <li class="about_us"><a href="/about"><span>About us</span></a></li>
      <li class="store"><a href="/store"><span>Shop</span></a></li>
    </ul>
  </div>

Then the CSS can be anything you like, but something like:

body.home div.nav_links ul li.home { /* blah blah */ }
body.about_us div.nav_links ul li.about_us { /* blah blah */ }

This method ensures good separation of concerns: the visual styles (changing of your colors) stay in your stylesheets, and out of your code.

Upvotes: 2

Adam Lassek
Adam Lassek

Reputation: 35505

Create a helper to generate the html for the menu, and use the controller.controller_name variable to change the class.

Upvotes: 0

Related Questions