Hamburger Menu Anim

by Jean-Baptiste Audras

HTML

<div class="container">
  <div class="row">
    <div class="col-sm-12">
      <div class="navToggle1">
        <div class="icon-left"></div>
        <div class="icon-right"></div>
      </div>

      <div class="navToggle2">
        <div class="icon"></div>
      </div>


      <div class="navToggle5">
        <div class="icon"></div>
      </div>

      <div class="navToggle6">
        <div class="icon"></div>
      </div>

      <div class="navToggle7">
        <div class="icon-E"></div>
        <div class="icon-X"></div>
      </div>

      <div class="navToggle8">
        <div class="icon-E"></div>
        <div class="icon-X"></div>
      </div>
      
    </div>
  </div>
</div>

CSS

body {
  background-color: #efefef;
  font-family: 'Roboto', sans-serif;
  color: red;
}

.container {
  position: relative;
  max-width: 420px;
  width: 100%;
  margin: 0 auto;
}

h1, p {
  text-align: center;
}

.navToggle1 {
  position: absolute;
  width: 60px;
  height: 120px;
  top: 60px;
  left: 0px;
  transition-duration: 0.5s;
}
.navToggle1 .icon-left {
  transition-duration: 0.5s;
  position: absolute;
  height: 8px;
  width: 30px;
  top: 60px;
  background-color: #212121;
}
.navToggle1 .icon-left:before {
  transition-duration: 0.5s;
  position: absolute;
  width: 30px;
  height: 8px;
  background-color: #212121;
  content: "";
  top: -20px;
}
.navToggle1 .icon-left:after {
  transition-duration: 0.5s;
  position: absolute;
  width: 30px;
  height: 8px;
  background-color: #212121;
  content: "";
  top: 20px;
}
.navToggle1 .icon-left:hover {
  cursor: pointer;
}
.navToggle1 .icon-right {
  transition-duration: 0.5s;
  position: absolute;
  height: 8px;
  width: 30px;
  top: 60px;
  background-color: #212121;
  left: 30px;
}
.navToggle1 .icon-right:before {
  transition-duration: 0.5s;
  position: absolute;
  width: 30px;
  height: 8px;
  background-color: #212121;
  content: "";
  top: -20px;
}
.navToggle1 .icon-right:after {
  transition-duration: 0.5s;
  position: absolute;
  width: 30px;
  height: 8px;
  background-color: #212121;
  content: "";
  top: 20px;
}
.navToggle1 .icon-right:hover {
  cursor: pointer;
}
.navToggle1.open .icon-left {
  transition-duration: 0.5s;
  background: transparent;
}
.navToggle1.open .icon-left:before {
  transform: rotateZ(45deg) scaleX(1.4) translate(4px, 4px);
}
.navToggle1.open .icon-left:after {
  transform: rotateZ(-45deg) scaleX(1.4) translate(4px, -4px);
}
.navToggle1.open .icon-right {
  transition-duration: 0.5s;
  background: transparent;
}
.navToggle1.open .icon-right:before {
  transform: rotateZ(-45deg) scaleX(1.4) translate(-4px, 4px);
}
.navToggle1.open .icon-right:after {
  transform: rotateZ(45deg)...

JavaScript

$(".navToggle1").click (function(){
  $(this).toggleClass("open");
});

$(".navToggle2").click (function(){
  $(this).toggleClass("open");
});

$(".navToggle3").click (function(){
  $(this).toggleClass("open");
});

$(".navToggle4").click (function(){
  $(this).toggleClass("open");
});

$(".navToggle5").click (function(){
  $(this).toggleClass("open");
});

$(".navToggle6").click (function(){
  $(this).toggleClass("open");
});

$(".navToggle7").click (function(){
  $(this).toggleClass("open");
});

$(".navToggle8").click (function(){
  $(this).toggleClass("open");
});

$(".navToggle9").click (function(){
  $(this).toggleClass("open");
});

$(".navToggle10").click (function(){
  $(this).toggleClass("open");
});

$(".navToggle11").click (function(){
  $(this).toggleClass("open");
});

$(".navToggle12").click (function(){
  $(this).toggleClass("open");
});

$(".navToggle13").click (function(){
  $(this).toggleClass("open");
});