MDL add ripple effect when clicking 'mdl-navigation__link'

Question

I have such navigation:

<nav class="mdl-navigation mdl-js-ripple-effect">
  <a id="submenu" class="mdl-navigation__link" href="#">Link</a>
  <a class="mdl-navigation__link" href="">Link</a>
  <a class="mdl-navigation__link" href="">Link</a>
  <a class="mdl-navigation__link" href="">Link</a>
</nav>

When <a> element clicked I want to add ripple effect on it with accent color. And then I want this element stayed selected. How can I do that?

Answer 1

EDIT : Note that, per request from OP, this answer has been edited to reflect his needs. If you came because of the title, check the other answer below. This answer is to keep the link selected after the ripple effect finishes. (Cf his comments where he asks for that)

---

You can easily add the ripple effect by setting class="mdl-navigation__link mdl-js-button mdl-js-ripple-effect mdl-button--icon" on your tags. However, since the <a> tag isn't meant to do that, we add some css to make it work :

a.mdl-js-ripple-effect {
  display: inline-block;//Important, without that the button won't appear correctly
  position: relative; //without it, ripple will be shifted

  width: 50px; //Same as height, for a perfect circle
  height: 50px; // Works with % values too
  line-height: 50px; //same as button height, to center the text vertically
  text-align: center; //Center horizontally 
}

Then, you don't want the ripple effect to disappear on the last clicked element. You can do that with some JQuery :

$('a.mdl-js-ripple-effect').click(function() {
$('a.mdl-js-ripple-effect').removeClass('selected');
$(this).addClass('selected');
});

When you click on any button, this code will remove the class 'selected' (or whatever you want) of every button, before adding it again to the one you clicked only. Then we style the selected class to keep the ripple effect.

.selected .mdl-ripple {//.selected is the class we used in javascript
  width: 0; //necessary, or it will be shifted
  opacity: 0.3; //To keep the ripple effect visible
}

You can try it in this Fiddle : Demo

Answer 2

Just using the classes class="mdl-navigation__link mdl-js-button mdl-js-ripple-effect"

And adding the css:

a.mdl-js-ripple-effect { position: relative; }

will do the trick, no need for all the other classes and javascript.