Уважаемые пользователи!
Доводим до вашего сведения, что мы не занимаемся обучениями по системе uCoz и настройками Ваших сайтов.
Подобные просьбы и вопросы - будут игнорироваться!
Подобные просьбы и вопросы - будут игнорироваться!
Анимированные иконки Hamburger (анимация при клике)
Дата добавления: 31.01.2018 - 11:33
Категория: Хаки / Дополнения, Кнопки / иконки
Добавил: Buger
Количество просмотров: 1.6k
Количество комментариев: 0
Размер файла: 15.1 Kb
Рейтинг материала: 0.0 / 0
БЕСПЛАТНО
рейтинг
0.0
/
голосов
0
Отличное решение для анимации кнопок при клике на мобильных устройствах. Пригодится тем, кто создает адаптивные проекты. Даже пригодится у кого на станицах сайта есть подобные кнопки, и вы всегда сможете заменить и настроить их на эти. Смотрится довольно интересно и использовано мало кода. Всего предоставлено 8 кнопок.
HTML
CSS
JS
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>
<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;
}
.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);
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);
Добавлять комментарии могут только зарегистрированные пользователи.
Поделись с друзьями: