2

I'm using this code for my navigation:

.row-fluid
    .span3
      .well
        %ul.nav.nav-tabs.nav-stacked
          %li.nav-header
            Menu
          %li
            %a{:href => "/cms/1"} page1
          %li
            %a{:href => "/cms/2"} page2
          %li
            %a{:href => "/cms/3"} page3
          %li
            %a{:href => "/cms/4"} page4

if i put .active after the %li it makes the item active, how can i do this dynamically so it reflects which page is currently active? I have all the bootstrap javascript files installed.

Adrian Heine
  • 4,051
  • 2
  • 30
  • 43
user1738017
  • 609
  • 2
  • 12
  • 29

2 Answers2

1

You can create a helper function like this: 

def active_navigation(item, param)
  "class='active'" if params[param] == item
end

And then in your view, you put something like this: 

%li.nav-header
  Menu
%li{:class => active_navigation(1, :id)}
  %a{:href => "/cms/1"} page1
%li{:class => active_navigation(2, :id)}
  %a{:href => "/cms/2"} page2
%li{:class => active_navigation(3, :id)}
  %a{:href => "/cms/3"} page3
%li{:class => active_navigation(4, :id)}
  %a{:href => "/cms/4"} page4

I just don't know/hate haml, so i don't think the syntax is correct. But i do think that this is a good example that you can try to adjust to your own domain.

MurifoX
  • 14,991
  • 3
  • 36
  • 60
1

Take a look at How to get Twitter-Bootstrap navigation to show active link? .

In that question there are a lot of alternatives to "autodetect" the current page, and therefore easily set the active class on the related menu item.

Community
  • 1
  • 1
Eloici
  • 93
  • 1
  • 4