sreginogemoh sreginogemoh - 16 days ago 6
CSS Question

MDL add ripple effect when clicking 'mdl-navigation__link'

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

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 offset

  width: 50px; //Same as height, for a perfect circle
  height: 50px; // Works with % values too
  line-height: 50px; //same as button height, for the text to be centered horizontally
  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 only the one you clicked. 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 offset
  opacity: 0.3; //To let the ripple effect shown
}

You can try it in this Fiddle : Demo