Animated Sidebar Menu Icon With CSS3 and jQuery

Here I have created an animated sidebar menu icon by using CSS3 transform properties and the jQuery toggleClass method. Here I have a button with three icon bars classes div tags which build a menu icon that looks like a sidebar off-canvas toggle.

HTML

<header>
<!-- Logo Here -->
<p class="logo">Click On Button</p>

<!-- Toggle Button -->
<button class="toggle-btn">
    <div class="icon-bar1"></div>
    <div class="icon-bar2"></div>
    <div class="icon-bar3"></div>
</button>
</header>

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
header {
    background-color: #F44336;
    padding: 10px 50px;
    float: left;
    width: 100%;
}
.logo {
    float: left;
    font-size: 35px;
    color: #fff;
}
.toggle-btn {
    cursor: pointer;
    background: none;
    float: right;
    border: none;
}
.icon-bar1, .icon-bar2, .icon-bar3 {
  background-color: #fff;
    margin: 8px 0;
    width: 40px;
    height: 3px;
    transition: 0.6s;
}
.rotate-icons .icon-bar1 {
  transform: rotate(-45deg) translate(-9px, 6px);
    -webkit-transform: rotate(-45deg) translate(-9px, 6px);
}
.rotate-icons .icon-bar2 {
  opacity: 0;
}
.rotate-icons .icon-bar3 {
  transform: rotate(45deg) translate(-8px, -8px);
    -webkit-transform: rotate(45deg) translate(-8px, -8px);
}

JavaScript

// Rotate Icons class added by jQuery
$(document).ready(function(){
    $(".toggle-btn").click(function(){
      $(this).toggleClass("rotate-icons");
    });
});