Rails 4: How to style navigation for current page using jQuery


Tags: javascript,jquery,html,css,ruby-on-rails

Problem :

I have been reading a lot on how to highlight / style links to show the user their current page. None of the solutions seem to work. I have a navbar with links such as <a href="/foo/"> and a dropdown with <a href="/foo/bar"> and when the current page is /foo/bar I want to add a class to both links (/foo/ and /foo/bar).

I have tried using the solutions on CSS-Tricks and tried writing my own jQuery but have not been able to select ALL of the correct DOM elements.

Is there a better jQuery solution or a way to do this server-side?



Solution :

Basically, you want to check if your current controller and action are the ones of the links.

Okay, here is some sample code:

application.css (for ease of seeing... use your own):

a.myLink {
   color: blue;
   background: white;
   size: 24px;
}

a.active {
  background: green;
  color: pink;
}

In your helper script (I put mine in application_helper):

module ApplicationHelper
  def active_link?(controller, *action)
    controller.include?(controller_name) && action.include?(action_name)
  end
end

in your layout page (mine is views/layouts/application.html):

<%= controller_name %>
<%= action_name %>
  <br>

  <%= link_to "list articles", articles_path, class:"myLink #{active_link?('articles', 'index') ? 'active' : '' }" %>
  <%= link_to "new article", new_article_path, class:"myLink #{active_link?('articles', 'new') ? 'active' : '' }"  %>
  <br>
  <%= link_to "list posts", posts_path,  class:"myLink #{active_link?('posts', 'index') ? 'active' : '' }"  %>
  <%= link_to "new post", new_post_path,  class:"myLink #{active_link?('posts', 'new') ? 'active' : '' }"  %>

  <%= yield %>

</body>

    CSS Howto..

    how to vertically align this div?

    How to add drop down menu using CSS?

    How can I create Javascript Buttons with Themes?

    How to default a custom-styled dropdown to browser default style dropdown

    In CSS, how to make the colored background be at least 50% of pagewidth and at most 90%, and as wide as necessary?

    How to make responsive video container div?

    How to use both jQuery styles and css style sheet?

    How can I implement this dual-gradient menu design?

    CSS: How do I make text indent for a label with long text?

    How to change the selection tip of custom cursor using css

    How to use a backslash in css content property?

    How to make a close button for each image inside the div using CSS and js

    How to use a CSS for only one div and not the rest of the code?

    How to Test CSS/HTML/jQuery?

    How do I link to top of a section on the page minus the height of a fixed nav-bar?

    HTML & CSS: How to create four equal size tabs that fill 100% width?

    How to make the transitions in my css work

    How to stretch vertical scroll?

    How do I know when to use a Class, an ID or HTML5 to make layouts in HTML using CSS? [closed]

    How to Determine CSS selector on a DOM object?

    How to use HTML classes and ID's

    Integration of CSS, Javascript and html ,,,howto

    How to decrease the width of this div so that another div can come next to it?

    How to mark up a layout blocks with the CSS property “display:flex;”?

    How to produce a green check mark on the menu tabs by using before and after selectors in css ?

    How to have vertical record and header in HTML table using CSS

    How to have CSS animation only on click and not on page load?

    How to add left border with image(s) dynamically

    How to use CSS calc according to a certain amount of li's?

    how to keep table 100% wide?