Кнопка Google Material Design
Интересная кнопка в стиле Material Design которая прячется при прокрутки вниз и появляется при прокрутки вверх.

В прошлом материале я описывал меню в стиле Material Design. Теперь опишу кнопку внешне похожу на это меню но добавлены еще стиле которые позволят прятаться кнопке при прокрутке вниз и появляться при прокрутке вверх. Мне кажется, что это неплохая идея.


В общем давайте перейдем к установке.




Html код


Код

<div class="menu_br">
  <div class="menu_drop">
  <a href="http://kanavas.at.ua/"><div class="menu_btn">
  <span class="menu_label">Kanavas</span>
  <i class="absolute-center fa fa-pencil"></i>
  </div></a>
</div>
</div>

Теперь добавляем скрипт


Код

<script type="text/javascript">  
  $(function(){
   
  var _top = $(window).scrollTop(),
  _direction,
  $menu_drop = $('.menu_drop');
   
  $(window).scroll(function(){
  var _cur_top = $(window).scrollTop();
   
  if(_top < _cur_top) {
  _direction = 'down';
  $menu_drop.stop().addClass('hide_top');
  }
  else {
  _direction = 'up';
  $menu_drop.removeClass('hide_top');
  }
   
  _top = _cur_top;
  console.log(_direction);
  });
  });
   
  </script>

И наконец устанавливаем стили


Код

.absolute-center {position: absolute;top: 0;left: 0;bottom: 0;right: 0;margin: auto;width: 20px;height: 20px;text-align: center; font-size: 18px!important; color: #fff;}
.menu_br {position: fixed;bottom: 0px;right: -15px;}
.menu_drop {position: absolute;bottom: 15px;right: 30px;-webkit-transition:-webkit-transform 0.7s .3s ease;-moz-transition: -moz-transform 0.7s .3s ease;-ms-transition: -ms-transform 0.7s .3s ease;transition: transform 0.7s .3s ease;-webkit-backface-visibility: hidden;-webkit-transform: translate3d(0px, 0px, 0px);}
.menu_br, .hide_top{-webkit-transform: translate(0, 200%);-moz-transform: translate(0, 200%);-ms-transform: translate(0, 200%);transform: translate(0, 200%);-webkit-backface-visibility: hidden;}
.menu_btn {position: relative;width: 45px;height: 45px;float: right;cursor: pointer;background-color: #3080e8;border-radius: 50%;box-shadow: 0 4px 8px rgba(0,0,0,.25);}
.menu_btn:hover .menu_label {opacity: 1;}
.menu_label {position: absolute;top: 14px;right: 115%;padding: 4px 8px;font-size: 14px;color: #fff;background-color:rgba(48, 128, 232, 0.7);border-radius:50px;opacity: 0;pointer-events: none;white-space: nowrap;transition: opacity .2s ease-out;}

Вот и все. Надеюсь не возникнет никаких вопросов по установке!

Всего комментариев: (4)

dogadaevznet
в 13:47, 18 Фев 16
спасибо
dogadaevznet
в 10:03, 18 Фев 16
Теперь добавляем скрипт - а куда? Заранее спс
Kanavas
в 10:22, 18 Фев 16
После html кода!
urenstyle41
в 17:23, 26 Мар 17
А где изменить код что бы она была не справа, а слева? 0:)
_LOGGED_IN$)?>
Чтобы оставить комментарий под этой публикацией, войдите или зарегистрируйтесь.

Случайные материалы

Скрываем админ-бар
Скрываем админ-бар
Красивая форма входа для uCoz от Kanavas
Красивая форма входа для uCoz от Ka
Знаки отличия пользователей
Знаки отличия пользователей
Обложка профиля
Обложка профиля
Делаем красивый вид материалов
Делаем красивый вид материалов
6 продвинутых и бесплатных CSS уроков от Сodrops
6 продвинутых и бесплатных CSS урок