<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hamburger Icons Animations</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"></head>
<body>
<h1>Hamburger Icons Animations</h1>
<hr style="width:20%;">
<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>
<div style="padding-bottom:1px;"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
body{padding:0;margin:0;background:no-repeat #3F51B5;background-image:linear-gradient(#7E57C2 50%,#3F51B5);text-align:center;background-size:100% 100%;height:100%;}
div{margin:10% 30px!important;}
.menuOne,.menuTwo,.menuThree,.menuFour{margin:10px;cursor:pointer;}
h1{color:#fff!important;text-shadow:1px 1px 1px #000;font-family:'Lucida Sans','Lucida Sans Regular','Lucida Grande','Lucida Sans Unicode',Geneva,Verdana,sans-serif;}
.menuOne{width:30px;height:30px;position:relative;transition:.1s;display:inline-block;}
.menuOne span{width:5px;height:5px;background-color:#fff;display:block;border-radius:50%;box-shadow:1px 1px 1px #000!important;}
.menuOne:hover span{transform:scale(1.3);transition:350ms cubic-bezier(.8,.5,.2,1.4);box-shadow:0 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:0;top:12px;}
.menuOne span:nth-child(7){position:absolute;left:0;bottom:0;}
.menuOne span:nth-child(8){position:absolute;left:12px;bottom:0;}
.menuOne span:nth-child(9){position:absolute;right:0;bottom:0;}
.clickMenuOne{transform:rotate(180deg);cursor:pointer;transition:.2s cubic-bezier(.8,.5,.2,1.4);}
.clickMenuOne span{border-radius:50%;background-color:rgba(255,189,189,.767);transition:.5s cubic-bezier(.8,.5,.2,1.4);}
.menuEight span,.menuFive span,.menuFour span,.menuSeven span,.menuSix span,.menuThree span,.menuTwo span{background-color:#FFF;border-radius:2px;box-shadow:1px 1px 1px #000!important;}
.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{width:35px;height:30px;position:relative;display:inline-block;}
.menuTwo span{position:absolute;transition:.3s cubic-bezier(.8,.5,.2,1.4);}
.menuTwo span:nth-child(1){width:100%;height:4px;display:block;top:0;left:0;}
.menuTwo span:nth-child(2){width:100%;height:4px;display:block;top:13px;left:0;}
.menuTwo span:nth-child(3){width:100%;height:4px;display:block;bottom:0;left:0;}
.menuTwo:not(.clickMenuTow):hover span:nth-child(1){width:100%;height:4px;display:block;top:-2px;left:0;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:0;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:0;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:.1s;}
.menuThree{width:35px;height:30px;position:relative;display:inline-block;}
.menuThree span{position:absolute;transition:.3s cubic-bezier(.8,.5,.2,1.4);}
.menuThree span:nth-child(1){width:100%;height:4px;display:block;top:0;left:0;}
.menuThree span:nth-child(2){width:100%;height:4px;display:block;top:13px;left:0;}
.menuThree span:nth-child(3){width:100%;height:4px;display:block;bottom:0;left:0;}
.menuThree:not(.clickMenuThree):hover span:nth-child(1){width:100%;height:4px;display:block;top:-2px;left:0;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:0;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:0;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:.1s;}
.menuFour{width:35px;height:30px;position:relative;display:inline-block;}
.menuFour span{position:absolute;transition:.3s cubic-bezier(.8,.5,.2,1.4);}
.menuFour span:nth-child(1){width:100%;height:4px;display:block;top:0;left:0;}
.menuFour span:nth-child(2){width:100%;height:4px;display:block;top:13px;left:0;}
.menuFour span:nth-child(3){width:100%;height:4px;display:block;bottom:0;left:0;}
.menuFour:not(.clickMenuFour):hover span:nth-child(1){width:100%;height:4px;display:block;top:-2px;left:0;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:0;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:0;transition:.3s cubic-bezier(.8,.5,.2,1.4);}
.menuEight,.menuFive,.menuSeven,.menuSix{margin:10px;cursor:pointer;display:inline-block;}
.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:.1s;}
.menuFive{width:35px;height:30px;position:relative;}
.menuFive span{position:absolute;transition:.3s cubic-bezier(.8,.5,.2,1.4);width:100%;height:4px;transition-duration:.5s;}
.menuFive span:nth-child(1){top:0;left:0;}
.menuFive span:nth-child(2){top:13px;left:0;}
.menuFive span:nth-child(3){bottom:0;left:0;}
.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{width:35px;height:30px;position:relative;}
.menuSix span{position:absolute;transition:.3s cubic-bezier(.8,.5,.2,1.4);width:100%;height:4px;}
.menuSix span:nth-child(1){top:0;left:0;}
.menuSix span:nth-child(2){top:13px;left:0;}
.menuSix span:nth-child(3){bottom:0;left:0;}
.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(.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(.7);top:13px;left:7px;}
.menuSeven{width:35px;height:30px;position:relative;}
.menuSeven span{position:absolute;transition:.3s cubic-bezier(.8,.5,.2,1.4);width:100%;height:4px;}
.menuSeven span:nth-child(1){top:0;left:0;}
.menuSeven span:nth-child(2){top:13px;left:0;}
.menuSeven span:nth-child(3){bottom:0;left:0;}
.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{width:35px;height:30px;position:relative;}
.menuEight span{position:absolute;transition:.3s cubic-bezier(.8,.5,.2,1.4);width:100%;height:4px;}
.menuEight span:nth-child(1){top:0;left:0;}
.menuEight span:nth-child(2){top:13px;left:0;}
.menuEight span:nth-child(3){bottom:0;left:0;}
.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),.clickMenuEight span:nth-child(3){top:13px;}
$(document).ready(function(){
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 addClassFunTwo() {
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', addClassFunTwo);
menuThree.addEventListener('click', addClassFunThree);
menuFour.addEventListener('click', addClassFunFour);
menuFive.addEventListener('click', addClassFunFive);
menuSix.addEventListener('click', addClassFunSix);
menuSeven.addEventListener('click', addClassFunSeven);
menuEight.addEventListener('click', addClassFunEight);
});
