Интернет магазин шабонов
Форма входа

Бесплатный раздел

Вы здесь: Главная страница » Файлы » Кнопки / иконки
Уважаемые пользователи!
Доводим до вашего сведения, что мы не занимаемся обучениями по системе uCoz и настройками Ваших сайтов.
Подобные просьбы и вопросы - будут игнорироваться!

Эффект кнопки для вызова списка меню

Дата добавления: 03.03.2017 - 16:04
Категория: Кнопки / иконки
Добавил: Buger
Количество просмотров: 263
Количество комментариев: 0
Размер файла: 11.4Kb
Рейтинг материала: 5.0 / 1
Эффект кнопки для вызова списка меню
БЕСПЛАТНО
Смотрите Демонстрацию
рейтинг 5.0
/
голосов 1
Поделись с друзьями:
Данная реализация кнопки заменит стандартную кнопку для вызова списка меню. Обычно такие кнопки часто встречаются в мобильных версиях, но ее можно встретить и PC версиях. Думаю что ее можно применить где угодно, но мы будем разговаривать не о том, где ее применить, а о том как такую кнопку сделать, причем с интересным и крутым эффектом при нажатии на нее. Ну а где ее применять - решать только вам, главное иметь фантазию :) Демонстрацию сможете увидеть, скачав данный файл.

И так начнем.

Первым что нам нужно сделать, это подключить стили:
Код
<style class="cp-pen-styles">
  body,
  html {
  width: 100%;
  height: 100%;
  background-color: #17181F;
  }
   
  .container {
  width: 80px;
  height: 80px;
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  cursor: pointer;
  }
   
  .stick {
  width: 80px;
  height: 8px;
  border-radius: 4px;
  margin-bottom: 15px;
  background-color: #2DFDB9;
  display: inline-block;
  }
   
  .stick:last-child {
  margin-bottom: 0px;
  }
   
  .stick-1.open {
  -webkit-animation: stick-1-open .6s ease-out forwards;
  animation: stick-1-open .6s ease-out forwards;
  }
   
  .stick-2.open {
  -webkit-animation: stick-2-open .6s linear forwards;
  animation: stick-2-open .6s linear forwards;
  }
   
  .stick-3.open {
  -webkit-animation: stick-3-open .6s linear forwards;
  animation: stick-3-open .6s linear forwards;
  }
   
  @-webkit-keyframes stick-1-open {
  0% {
  width: 80px;
  }
  40% {
  background-color: #ff1456;
  width: 8px;
  -webkit-transform: translate(40px, 0px);
  transform: translate(40px, 0px);
  }
  75%,
  80% {
  width: 8px;
  -webkit-transform: translate(40px, -50px);
  transform: translate(40px, -50px);
  -webkit-animation-timing-function: cubic-bezier(0, 1, 1, 1);
  animation-timing-function: cubic-bezier(0, 1, 1, 1);
  }
  100% {
  background-color: #ff1456;
  width: 8px;
  -webkit-transform: translate(35px, 46px);
  transform: translate(35px, 46px);
  }
  }
   
  @keyframes stick-1-open {
  0% {
  width: 80px;
  }
  40% {
  background-color: #ff1456;
  width: 8px;
  -webkit-transform: translate(40px, 0px);
  transform: translate(40px, 0px);
  }
  75%,
  80% {
  width: 8px;
  -webkit-transform: translate(40px, -50px);
  transform: translate(40px, -50px);
  -webkit-animation-timing-function: cubic-bezier(0, 1, 1, 1);
  animation-timing-function: cubic-bezier(0, 1, 1, 1);
  }
  100% {
  background-color: #ff1456;
  width: 8px;
  -webkit-transform: translate(35px, 46px);
  transform: translate(35px, 46px);
  }
  }
   
  @-webkit-keyframes stick-2-open {
  80% {
  background-color: #2DFDB9;
  -webkit-transform: translate(0px, 0px) rotate(0deg);
  transform: translate(0px, 0px) rotate(0deg);
  }
  100% {
  background-color: #ff1456;
  -webkit-transform: translate(8px, 0px) rotate(40deg);
  transform: translate(8px, 0px) rotate(40deg);
  }
  }
   
  @keyframes stick-2-open {
  80% {
  background-color: #2DFDB9;
  -webkit-transform: translate(0px, 0px) rotate(0deg);
  transform: translate(0px, 0px) rotate(0deg);
  }
  100% {
  background-color: #ff1456;
  -webkit-transform: translate(8px, 0px) rotate(40deg);
  transform: translate(8px, 0px) rotate(40deg);
  }
  }
   
  @-webkit-keyframes stick-3-open {
  80% {
  background-color: #2DFDB9;
  -webkit-transform: translate(0px, 0px) rotate(0deg);
  transform: translate(0px, 0px) rotate(0deg);
  }
  100% {
  background-color: #ff1456;
  -webkit-transform: translate(8px, -23px) rotate(-40deg);
  transform: translate(8px, -23px) rotate(-40deg);
  }
  }
   
  @keyframes stick-3-open {
  80% {
  background-color: #2DFDB9;
  -webkit-transform: translate(0px, 0px) rotate(0deg);
  transform: translate(0px, 0px) rotate(0deg);
  }
  100% {
  background-color: #ff1456;
  -webkit-transform: translate(8px, -23px) rotate(-40deg);
  transform: translate(8px, -23px) rotate(-40deg);
  }
  }
   
  .stick-1.close {
  width: 8px;
  -webkit-transform: translate(27px, 26px);
  transform: translate(27px, 26px);
  -webkit-animation: stick-1-close .6s ease-out forwards;
  animation: stick-1-close .6s ease-out forwards;
  }
   
  .stick-2.close {
  -webkit-transform: translate(0px, 0px) rotate(40deg);
  transform: translate(0px, 0px) rotate(40deg);
  -webkit-animation: stick-2-close .6s ease-out forwards;
  animation: stick-2-close .6s ease-out forwards;
  }
   
  .stick-3.close {
  -webkit-transform: translate(0px, -23px) rotate(-40deg);
  transform: translate(0px, -23px) rotate(-40deg);
  -webkit-animation: stick-3-close .6s ease-out forwards;
  animation: stick-3-close .6s ease-out forwards;
  }
   
  @-webkit-keyframes stick-1-close {
  0%,
  70% {
  width: 0px;
  }
  100% {
  width: 80px;
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
  }
  }
   
  @keyframes stick-1-close {
  0%,
  70% {
  width: 0px;
  }
  100% {
  width: 80px;
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
  }
  }
   
  @-webkit-keyframes stick-2-close {
  0% {
  background-color: #ff1456;
  width: 80px;
  }
  20% {
  background-color: #ff1456;
  width: 8px;
  -webkit-transform: translate(0, 0px) rotate(40deg);
  transform: translate(0, 0px) rotate(40deg);
  }
  40% {
  background-color: #2DFDB9;
  width: 0px;
  }
  65% {
  -webkit-transform: translate(0, -70px);
  transform: translate(0, -70px);
  -webkit-animation-timing-function: cubic-bezier(0, 1, 1, 1);
  animation-timing-function: cubic-bezier(0, 1, 1, 1);
  }
  80% {
  width: 0px;
  }
  100% {
  width: 80px;
  -webkit-transform: translate(0, 0px);
  transform: translate(0, 0px);
  }
  }
   
  @keyframes stick-2-close {
  0% {
  background-color: #ff1456;
  width: 80px;
  }
  20% {
  background-color: #ff1456;
  width: 8px;
  -webkit-transform: translate(0, 0px) rotate(40deg);
  transform: translate(0, 0px) rotate(40deg);
  }
  40% {
  background-color: #2DFDB9;
  width: 0px;
  }
  65% {
  -webkit-transform: translate(0, -70px);
  transform: translate(0, -70px);
  -webkit-animation-timing-function: cubic-bezier(0, 1, 1, 1);
  animation-timing-function: cubic-bezier(0, 1, 1, 1);
  }
  80% {
  width: 0px;
  }
  100% {
  width: 80px;
  -webkit-transform: translate(0, 0px);
  transform: translate(0, 0px);
  }
  }
   
  @-webkit-keyframes stick-3-close {
  0% {
  background-color: #ff1456;
  width: 80px;
  }
  20% {
  background-color: #ff1456;
  width: 8px;
  -webkit-transform: translate(0, -23px) rotate(-40deg);
  transform: translate(0, -23px) rotate(-40deg);
  }
  40% {
  background-color: #2DFDB9;
  }
  65% {
  -webkit-transform: translate(0, -93px);
  transform: translate(0, -93px);
  -webkit-animation-timing-function: cubic-bezier(0, 1, 1, 1);
  animation-timing-function: cubic-bezier(0, 1, 1, 1);
  }
  90% {
  width: 8px;
  }
  100% {
  width: 80px;
  -webkit-transform: translate(0, 0px);
  transform: translate(0, 0px);
  }
  }
   
  @keyframes stick-3-close {
  0% {
  background-color: #ff1456;
  width: 80px;
  }
  20% {
  background-color: #ff1456;
  width: 8px;
  -webkit-transform: translate(0, -23px) rotate(-40deg);
  transform: translate(0, -23px) rotate(-40deg);
  }
  40% {
  background-color: #2DFDB9;
  }
  65% {
  -webkit-transform: translate(0, -93px);
  transform: translate(0, -93px);
  -webkit-animation-timing-function: cubic-bezier(0, 1, 1, 1);
  animation-timing-function: cubic-bezier(0, 1, 1, 1);
  }
  90% {
  width: 8px;
  }
  100% {
  width: 80px;
  -webkit-transform: translate(0, 0px);
  transform: translate(0, 0px);
  }
  }
  </style>


Теперь надо указать HTML код разметки элементов данной кнопки
Код
<div class="container">
  <div class="stick stick-1"></div>
  <div class="stick stick-2"></div>
  <div class="stick stick-3"></div>
  </div>


Если у вас нет библиотеки jQuery, то подключаем. Но такое бывает редко, сейчас jquery используется практически везде, так как без данной библиотеки не будет работать ни один скрипт и функции. Подключать будем из CDN
Код
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>


Ну и в завершении, подключим скрипт для кнопки
Код
<script>
  $(document).ready(function () {
  $(".container").click(function () {
  $(".stick").toggleClass(function () {
  return $(this).is('.open, .close') ? 'open close' : 'open';
  });
  });
  });
  </script>


Источник: https://art-ucoz.ru/
Добавлять комментарии могут только зарегистрированные пользователи.