Hamburger Menu CSS with Animation

hamburger-menu-css-with-animation.markdown

Hamburger Menu CSS with Animation

short and to the point hamburger menu animation. Try clicking on it. based on https://www.w3schools.com/howto/howto_css_menu_icon.asp

A Pen by Vincent Tang on CodePen.

License.

hamburger-menu-css.markdown

Hamburger Menu CSS

short and to the point hamburger menu. based on https://www.w3schools.com/howto/howto_css_menu_icon.asp

A Pen by Vincent Tang on CodePen.

License.

index.pug

#hamburger
  .bar1
  .bar2
  .bar3

script.js

$(document).ready(function() {
  $('#hamburger').on("click",function(){
    $(this).toggleClass('open');
  })
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

style.scss

#hamburger {
  display: inline-block;
  cursor: pointer;
  background-color: lightgrey;
  transform: scale(10); /* For viewing purposes only, delete this in production*/
  transform-origin: top left; /* For viewing purposes only, delete this in production*/
}
.bar1,
.bar2,
.bar3 {
  width: 35px;
  height: 5px;
  background-color: grey;
  margin-top: 6px;
  margin-bottom: 6px;
  transition: 0.4s;
  border-radius: 7px;
}
.open {
  .bar1{
    transform: rotate(-45deg) translate(-9px,6px);
  }
  .bar2{
    opacity: 0;
  }
  .bar3 {
    transform: rotate(45deg) translate(-8px,-8px);
  }
}