MDL добавляет волновой эффект при нажатии «mdl-navigation__link»

У меня такая навигация:

<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>

Когда щелкнул элемент <a>, я хочу добавить к нему волновой эффект с акцентным цветом. И затем я хочу, чтобы этот элемент оставался выделенным. Как я могу это сделать?


material-design css material-design-lite
person sreginogemoh    schedule 11.03.2016    source источник

Ответы (2)


arrow_upward
4
arrow_downward

РЕДАКТИРОВАТЬ: Обратите внимание, что по запросу от OP этот ответ был отредактирован, чтобы отразить его потребности. Если вы пришли из-за названия, проверьте другой ответ ниже. Этот ответ состоит в том, чтобы оставить ссылку выбранной после окончания волнового эффекта. (См. его комментарии, где он просит об этом)

Вы можете легко добавить волновой эффект, установив class="mdl-navigation__link mdl-js-button mdl-js-ripple-effect mdl-button--icon" в своих тегах. Однако, поскольку тег <a> не предназначен для этого, мы добавим немного CSS, чтобы он работал:

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 
}

Затем вы не хотите, чтобы эффект пульсации исчез на последнем элементе, по которому щелкнули. Вы можете сделать это с помощью JQuery:

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

Когда вы нажимаете на любую кнопку, этот код удалит класс «выбранный» (или что вы хотите) каждой кнопки, прежде чем добавить его снова к той, которую вы нажали. Затем мы стилизуем выбранный класс, чтобы сохранить волновой эффект.

.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
}

Вы можете попробовать это в этой Fiddle: Demo

person Amine I.    schedule 14.03.2016
comment
Как сделать, чтобы выбирался только один элемент? - person sreginogemoh; 14.03.2016
comment
@sreginogemoh Я обновил свою скрипку и ответил, чтобы сделать это, однако с помощью JQuery. На самом деле вы не указали, хотите ли вы получить ответ только с помощью CSS, и большая часть MDL работает с JS, поэтому я предположил, что все в порядке. Проверьте это! - person Amine I.; 15.03.2016

arrow_upward
4
arrow_downward

Просто используя классы class="mdl-navigation__link mdl-js-button mdl-js-ripple-effect"

И добавляем css:

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

сделает свое дело, нет необходимости во всех других классах и javascript.

person Fortes    schedule 22.11.2016
comment
Привет ! Спустя почти год я только что заметил ваш ответ на его вопрос: действительно, вы отвечаете на вопрос. MDL добавляет волновой эффект при нажатии «mdl-navigation__link», и это ответ, который все будут искать с этим заголовком. Но OP уточнил свой запрос, чтобы спросить, чтобы волновой эффект оставался активным после нажатия на ссылку, поэтому я отредактировал свой ответ, и поэтому ваш ответ не совсем отражает его потребности и не был принят. Однако с заголовком вопроса ваш ответ является правильным, поэтому вы получите мой голос за это :). - person Amine I.; 23.08.2017