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

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

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

Анимированные иконки Hamburger (анимация при клике)

Дата добавления: 31.01.2018 - 11:33
Добавил: Buger
Количество просмотров: 197
Количество комментариев: 0
Размер файла: 15.1Kb
Рейтинг материала: 0.0 / 0
Анимированные иконки Hamburger (анимация при клике)
БЕСПЛАТНО
Смотрите Демонстрацию
рейтинг 0.0
/
голосов 0
Поделись с друзьями:
Отличное решение для анимации кнопок при клике на мобильных устройствах. Пригодится тем, кто создает адаптивные проекты. Даже пригодится у кого на станицах сайта есть подобные кнопки, и вы всегда сможете заменить и настроить их на эти. Смотрится довольно интересно и использовано мало кода. Всего предоставлено 8 кнопок.

HTML
Код
<div class="menuOne">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>
<div class="menuTwo">
  <span></span>
  <span></span>
  <span></span>
</div>
<div class="menuThree">
  <span></span>
  <span></span>
  <span></span>
</div>

<div class="menuFour">
  <span></span>
  <span></span>
  <span></span>
</div>
<div class="menuFive">
  <span></span>
  <span></span>
  <span></span>
</div>

<div class="menuSix">
  <span></span>
  <span></span>
  <span></span>
</div>

<div class="menuSeven">
  <span></span>
  <span></span>
  <span></span>
</div>

<div class="menuEight">
  <span></span>
  <span></span>
  <span></span>
</div>


CSS
Код
/* menuOne */
.menuOne {
  width: 30px;
  height: 30px;
  position: relative;
  transition: .1s;
  margin: 10px 10px;
  cursor: pointer;
  display: inline-block;
}

.menuOne span {
  width: 5px;
  height: 5px;
  background-color: #fff;
  display: block;
  border-radius: 50%;
}

.menuOne:hover span {
  transform: scale(1.3);
  transition: 350ms cubic-bezier(.8, .5, .2, 1.4);
  box-shadow: 0px 2px 3px rgba(0, 0, 0, .4);
}

.menuOne span:nth-child(1) {
  position: absolute;
  left: 0;
  top: 0;
}

.menuOne span:nth-child(2) {
  position: absolute;
  left: 12px;
  top: 0;

}

.menuOne span:nth-child(3) {
  position: absolute;
  right: 0;
  top: 0;
}

.menuOne span:nth-child(4) {
  position: absolute;
  left: 0;
  top: 12px;
}

.menuOne span:nth-child(5) {
  position: absolute;
  left: 12px;
  top: 12px;
}

.menuOne span:nth-child(6) {
  position: absolute;
  right: 0px;
  top: 12px;
}

.menuOne span:nth-child(7) {
  position: absolute;
  left: 0px;
  bottom: 0px;
}

.menuOne span:nth-child(8) {
  position: absolute;
  left: 12px;
  bottom: 0px;
}

.menuOne span:nth-child(9) {
  position: absolute;
  right: 0px;
  bottom: 0px;
}

.clickMenuOne {
  transform: rotate(180deg);
  cursor: pointer;
  transition: .2s cubic-bezier(.8, .5, .2, 1.4);

}

.clickMenuOne span {
  border-radius: 50%;
  transition-delay: 200ms;
  background-color: rgba(255, 189, 189, 0.767);
  transition: .5s cubic-bezier(.8, .5, .2, 1.4);

}

.clickMenuOne span:nth-child(2) {
  position: absolute;
  left: 6px;
  top: 6px;
}

.clickMenuOne span:nth-child(4) {
  position: absolute;
  left: 6px;
  top: 18px;
}

.clickMenuOne span:nth-child(6) {
  position: absolute;
  right: 6px;
  top: 6px;
}

.clickMenuOne span:nth-child(8) {
  position: absolute;
  left: 18px;
  bottom: 6px;
}

/* menuTwo */
.menuTwo {
  width: 35px;
  height: 30px;
  margin: 10px 10px;
  position: relative;
  cursor: pointer;
  display: inline-block;

}

.menuTwo span {
  background-color: #FFF;
  position: absolute;
  border-radius: 2px;
  transition: .3s cubic-bezier(.8, .5, .2, 1.4);
}

.menuTwo span:nth-child(1) {
  width: 100%;
  height: 4px;
  display: block;
  top: 0px;
  left: 0px;
}

.menuTwo span:nth-child(2) {
  width: 100%;
  height: 4px;
  display: block;
  top: 13px;
  left: 0px;
}

.menuTwo span:nth-child(3) {
  width: 100%;
  height: 4px;
  display: block;
  bottom: 0px;
  left: 0px;
}

.menuTwo:not(.clickMenuTow):hover span:nth-child(1) {
  width: 100%;
  height: 4px;
  display: block;
  top: -2px;
  left: 0px;
  transition: .3s cubic-bezier(.8, .5, .2, 1.4);
}

.menuTwo:not(.clickMenuTow):hover span:nth-child(2) {
  width: 100%;
  height: 4px;
  display: block;
  top: 13px;
  left: 0px;
  transition: .4s cubic-bezier(.8, .5, .2, 1.4);
}

.menuTwo:not(.clickMenuTow):hover span:nth-child(3) {
  width: 100%;
  height: 4px;
  display: block;
  bottom: -2px;
  left: 0px;
  transition: .3s cubic-bezier(.8, .5, .2, 1.4);
}

.clickMenuTow span:nth-child(1) {
  left: 3px;
  top: 12px;
  width: 30px;
  transition: .3s cubic-bezier(.8, .5, .2, 1.4);
  transform: rotate(90deg);
  transition-delay: 150ms;
}

.clickMenuTow span:nth-child(2) {
  left: 2px;
  top: 20px;
  width: 20px;
  transition: .3s cubic-bezier(.8, .5, .2, 1.4);
  transform: rotate(45deg);
  transition-delay: 50ms;
}

.clickMenuTow span:nth-child(3) {
  left: 14px;
  top: 20px;
  width: 20px;
  transition: .3s cubic-bezier(.8, .5, .2, 1.4);
  transform: rotate(-45deg);
  transition-delay: 100ms;
}

/* menuThree */
.menuThree {
  width: 35px;
  height: 30px;
  margin: 10px 10px;
  position: relative;
  cursor: pointer;
  display: inline-block;

}

.menuThree span {
  background-color: #FFF;
  position: absolute;
  border-radius: 2px;
  transition: .3s cubic-bezier(.8, .5, .2, 1.4);
}

.menuThree span:nth-child(1) {
  width: 100%;
  height: 4px;
  display: block;
  top: 0px;
  left: 0px;
}

.menuThree span:nth-child(2) {
  width: 100%;
  height: 4px;
  display: block;
  top: 13px;
  left: 0px;
}

.menuThree span:nth-child(3) {
  width: 100%;
  height: 4px;
  display: block;
  bottom: 0px;
  left: 0px;
}

.menuThree:not(.clickMenuThree):hover span:nth-child(1) {
  width: 100%;
  height: 4px;
  display: block;
  top: -2px;
  left: 0px;
  transition: .3s cubic-bezier(.8, .5, .2, 1.4);
}

.menuThree:not(.clickMenuThree):hover span:nth-child(2) {
  width: 100%;
  height: 4px;
  display: block;
  top: 13px;
  left: 0px;
  transition: .4s cubic-bezier(.8, .5, .2, 1.4);
}

.menuThree:not(.clickMenuThree):hover span:nth-child(3) {
  width: 100%;
  height: 4px;
  display: block;
  bottom: -2px;
  left: 0px;
  transition: .3s cubic-bezier(.8, .5, .2, 1.4);
}

.clickMenuThree {
  transform: rotate(-90deg);
}

.clickMenuThree span:nth-child(1) {
  left: 3px;
  top: 12px;
  width: 30px;
  transition: .3s cubic-bezier(.8, .5, .2, 1.4);
  transform: rotate(90deg);
  transition-delay: 150ms;
}

.clickMenuThree span:nth-child(2) {
  left: 2px;
  top: 20px;
  width: 20px;
  transition: .3s cubic-bezier(.8, .5, .2, 1.4);
  transform: rotate(45deg);
  transition-delay: 50ms;
}

.clickMenuThree span:nth-child(3) {
  left: 14px;
  top: 20px;
  width: 20px;
  transition: .3s cubic-bezier(.8, .5, .2, 1.4);
  transform: rotate(-45deg);
  transition-delay: 100ms;
}

/* menuFour */
.menuFour {
  width: 35px;
  height: 30px;
  margin: 10px 10px;
  position: relative;
  cursor: pointer;
  display: inline-block;

}

.menuFour span {
  background-color: #FFF;
  position: absolute;
  border-radius: 2px;
  transition: .3s cubic-bezier(.8, .5, .2, 1.4);
}

.menuFour span:nth-child(1) {
  width: 100%;
  height: 4px;
  display: block;
  top: 0px;
  left: 0px;
}

.menuFour span:nth-child(2) {
  width: 100%;
  height: 4px;
  display: block;
  top: 13px;
  left: 0px;
}

.menuFour span:nth-child(3) {
  width: 100%;
  height: 4px;
  display: block;
  bottom: 0px;
  left: 0px;
}

.menuFour:not(.clickMenuFour):hover span:nth-child(1) {
  width: 100%;
  height: 4px;
  display: block;
  top: -2px;
  left: 0px;
  transition: .3s cubic-bezier(.8, .5, .2, 1.4);
}

.menuFour:not(.clickMenuFour):hover span:nth-child(2) {
  width: 100%;
  height: 4px;
  display: block;
  top: 13px;
  left: 0px;
  transition: .4s cubic-bezier(.8, .5, .2, 1.4);
}

.menuFour:not(.clickMenuFour):hover span:nth-child(3) {
  width: 100%;
  height: 4px;
  display: block;
  bottom: -2px;
  left: 0px;
  transition: .3s cubic-bezier(.8, .5, .2, 1.4);
}

.clickMenuFour {
  transform: rotate(90deg);
}

.clickMenuFour span:nth-child(1) {
  left: 3px;
  top: 12px;
  width: 30px;
  transition: .3s cubic-bezier(.8, .5, .2, 1.4);
  transform: rotate(90deg);
  transition-delay: 150ms;
}

.clickMenuFour span:nth-child(2) {
  left: 2px;
  top: 20px;
  width: 20px;
  transition: .3s cubic-bezier(.8, .5, .2, 1.4);
  transform: rotate(45deg);
  transition-delay: 50ms;
}

.clickMenuFour span:nth-child(3) {
  left: 14px;
  top: 20px;
  width: 20px;
  transition: .3s cubic-bezier(.8, .5, .2, 1.4);
  transform: rotate(-45deg);
  transition-delay: 100ms;
}

/* menuFive */
.menuFive {
  width: 35px;
  height: 30px;
  margin: 10px 10px;
  position: relative;
  cursor: pointer;
  display: inline-block;
}

.menuFive span {
  background-color: #FFF;
  position: absolute;
  border-radius: 2px;
  transition: .3s cubic-bezier(.8, .5, .2, 1.4);
  width: 100%;
  height: 4px;
  transition-duration: 500ms
}

.menuFive span:nth-child(1) {
  top: 0px;
  left: 0px;
}

.menuFive span:nth-child(2) {
  top: 13px;
  left: 0px;
}

.menuFive span:nth-child(3) {
  bottom: 0px;
  left: 0px;
}

.menuFive:not(.clickMenuFive):hover span:nth-child(1) {
  transform: rotate(-3deg) scaleY(1.1);
}

.menuFive:not(.clickMenuFive):hover span:nth-child(2) {
  transform: rotate(3deg) scaleY(1.1);
}

.menuFive:not(.clickMenuFive):hover span:nth-child(3) {
  transform: rotate(-4deg) scaleY(1.1);
}

.clickMenuFive span:nth-child(1) {
  transform: rotate(45deg);
  top: 13px;

}

.clickMenuFive span:nth-child(2) {
  transform: scale(.1);

}

.clickMenuFive span:nth-child(3) {
  transform: rotate(-45deg);
  top: 13px;
}

/* menuSix */
.menuSix {
  width: 35px;
  height: 30px;
  margin: 10px 10px;
  position: relative;
  cursor: pointer;
  display: inline-block;
}

.menuSix span {
  background-color: #FFF;
  position: absolute;
  border-radius: 2px;
  transition: .3s cubic-bezier(.8, .5, .2, 1.4);
  width: 100%;
  height: 4px;
}

.menuSix span:nth-child(1) {
  top: 0px;
  left: 0px;
}

.menuSix span:nth-child(2) {
  top: 13px;
  left: 0px;
}

.menuSix span:nth-child(3) {
  bottom: 0px;
  left: 0px;
}

.menuSix:not(.clickMenuSix):hover span:nth-child(1) {
  transform: scaleY(1.2);
  left: -5px;
}

.menuSix:not(.clickMenuSix):hover span:nth-child(2) {
  transform: rotate(5deg) scaleY(1.1);
}

.menuSix:not(.clickMenuSix):hover span:nth-child(3) {
  transform: scaleY(1.2);
  left: 5px;
}

.clickMenuSix span:nth-child(1) {
  transform: rotate(45deg) scaleX(0.7);
  top: 13PX;
  left: -8px;

}

.clickMenuSix span:nth-child(2) {
  transform: scale(0);
  transition-duration: 50ms
}

.clickMenuSix span:nth-child(3) {
  transform: rotate(-45deg) scaleX(0.7);
  top: 13PX;
  left: 7px;
}

/* menuSeven */
.menuSeven {
  width: 35px;
  height: 30px;
  margin: 10px 10px;
  position: relative;
  cursor: pointer;
  display: inline-block;
}

.menuSeven span {
  background-color: #FFF;
  position: absolute;
  border-radius: 2px;
  transition: .3s cubic-bezier(.8, .5, .2, 1.4);
  width: 100%;
  height: 4px;
}

.menuSeven span:nth-child(1) {
  top: 0px;
  left: 0px;
}

.menuSeven span:nth-child(2) {
  top: 13px;
  left: 0px;
}

.menuSeven span:nth-child(3) {
  bottom: 0px;
  left: 0px;
}

.menuSeven:not(.clickMenuSeven):hover span:nth-child(1) {
  transform: scaleX(.8);
}

.menuSeven:not(.clickMenuSeven):hover span:nth-child(2) {
  transform: scaleX(.5);
}

.menuSeven:not(.clickMenuSeven):hover span:nth-child(3) {
  transform: scaleX(.8);
}

.clickMenuSeven span:nth-child(1) {
  transform: rotate(90deg);
  top: 13PX;

}

.clickMenuSeven span:nth-child(2) {
  transform: scale(0);
  transition-duration: 50ms
}

.clickMenuSeven span:nth-child(3) {
  top: 13PX;
}

/* menuEight */
.menuEight {
  width: 35px;
  height: 30px;
  margin: 10px 10px;
  position: relative;
  cursor: pointer;
  display: inline-block;
}

.menuEight span {
  background-color: #FFF;
  position: absolute;
  border-radius: 2px;
  transition: .3s cubic-bezier(.8, .5, .2, 1.4);
  width: 100%;
  height: 4px;
}

.menuEight span:nth-child(1) {
  top: 0px;
  left: 0px;
}

.menuEight span:nth-child(2) {
  top: 13px;
  left: 0px;
}

.menuEight span:nth-child(3) {
  bottom: 0px;
  left: 0px;
}

.menuEight:not(.clickMenuEight):hover span:nth-child(1) {
  transform: scaleX(.8);
}

.menuEight:not(.clickMenuEight):hover span:nth-child(2) {
  transform: scaleX(.5);
}

.menuEight:not(.clickMenuEight):hover span:nth-child(3) {
  transform: scaleX(.8);
}

.clickMenuEight span:nth-child(1) {
  top: 13PX;

}

.clickMenuEight span:nth-child(2) {}

.clickMenuEight span:nth-child(3) {
  top: 13PX;
}


JS
Код
const menuOne = document.querySelector('.menuOne');
const menuTwo = document.querySelector('.menuTwo');
const menuThree = document.querySelector('.menuThree');
const menuFour = document.querySelector('.menuFour');
const menuFive = document.querySelector('.menuFive');
const menuSix = document.querySelector('.menuSix');
const menuSeven = document.querySelector('.menuSeven');
const menuEight = document.querySelector('.menuEight');

function addClassFunOne() {
  this.classList.toggle("clickMenuOne");
}

function addClassFunTow() {
  this.classList.toggle("clickMenuTow");
}

function addClassFunThree() {
  this.classList.toggle("clickMenuThree");
}

function addClassFunFour() {
  this.classList.toggle("clickMenuFour");
}

function addClassFunFive() {
  this.classList.toggle("clickMenuFive");
}

function addClassFunSix() {
  this.classList.toggle("clickMenuSix");
}

function addClassFunSeven() {
  this.classList.toggle("clickMenuSeven");
}

function addClassFunEight() {
  this.classList.toggle("clickMenuEight");
}

menuOne.addEventListener('click', addClassFunOne);
menuTwo.addEventListener('click', addClassFunTow);
menuThree.addEventListener('click', addClassFunThree);
menuFour.addEventListener('click', addClassFunFour);
menuFive.addEventListener('click', addClassFunFive);
menuSix.addEventListener('click', addClassFunSix);
menuSeven.addEventListener('click', addClassFunSeven);
menuEight.addEventListener('click', addClassFunEight);
Добавлять комментарии могут только зарегистрированные пользователи.