Hamburger Icons Animations

hamburger-icons-animations.markdown

Hamburger Icons Animations

Hamburger Icons Animations

A Pen by Ahmad Emran on CodePen.

License.

index.html

 <h1>Hamburger Icons Animations</h1>
    <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>

script.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);
    

style.css

body{
  padding: 0;
  margin: 0;
  background:#3F51B5;
  background-image: linear-gradient(#7E57C2 50%, #3F51B5);
  text-align: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  height:100%;
}
div{
  margin: 10% 30px !important;
}
h1{
  color:#fff;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}


/* 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;
}