CodePen Embed - The Hamburger Menu

<div class="container">
  <div class="row">
    <div class="col-sm-12">
      <h1>The Hamburger Menu</h1>
      <p>(click)</p>
      
      <div class="menu btn1" data-menu="1">
        <div class="icon-left"></div>
        <div class="icon-right"></div>
      </div>

      <div class="menu btn2" data-menu="2">
        <div class="icon"></div>
      </div>

      <div class="menu btn3" data-menu="3">
        <div class="icon"></div>
      </div>

      <div class="menu btn4" data-menu="4">
        <div class="icon"></div>
      </div>

      <div class="menu btn5" data-menu="5">
        <div class="icon"></div>
      </div>

      <div class="menu btn6" data-menu="6">
        <div class="icon"></div>
      </div>

      <div class="menu btn7" data-menu="7">
        <div class="icon-E"></div>
        <div class="icon-X"></div>
      </div>

      <div class="menu btn8" data-menu="8">
        <div class="icon-E"></div>
        <div class="icon-X"></div>
      </div>
      
      <div class="menu btn9" data-menu="9">
        <div class="icon"></div>
      </div>
      
      <div class="menu btn10" data-menu="10">
        <div class="icon"></div>
      </div>
      
      <div class="menu btn11" data-menu="11">
        <div class="icon-left"></div>
        <div class="icon-right"></div>
      </div>
      
      <div class="menu btn12" data-menu="12">
        <div class="icon"></div>
      </div>
      
      <div class="menu btn13" data-menu="13">
        <div class="icon"></div>
      </div>
      
      <div class="menu btn14" data-menu="14">
        <div class="icon-circle"></div>
        <div class="icon"></div>
      </div>
      
      <div class="menu btn15" data-menu="15">
        <div class="icon"></div>
      </div>
      
      <div class="menu btn16" data-menu="16">
        <div class="icon"></div>
      </div>
    </div>
  </div>
</div>

@import "compass/css3";

$dark: #212121;
$light: #efefef;
$color: #b3e5fc;

@mixin btn($left, $top) {
  position: absolute;
  width: 60px;
  height: 60px;
  top: $top;
  left: $left;
  transition-duration: 0.5s;
}

@mixin icon($height, $width) {
  transition-duration: 0.5s;
  position: absolute;
  height: $height;
  width: $width;
  top: 30px;
  background-color: $dark;
}

@mixin icon-before($height, $width, $top) {
  transition-duration: 0.5s;
  position: absolute;
  width: $width;
  height: $height;
  background-color: $dark;
  content: "";
  top: $top;
}

@mixin icon-after($height, $width, $top) {
  transition-duration: 0.5s;
  position: absolute;
  width: $width;
  height: $height;
  background-color: $dark;
  content: "";
  top: $top;
}

@mixin icon-circle($height, $width) {
  transition-duration: 0.5s;
  position: absolute;
  height: $height;
  width: $width;
  top: 2px;
  border-radius: 100%;
  background: transparent;
  border: 4px solid black;
  left: -15px;
}

body {
  background-color: $light;
  font-family: 'Roboto', sans-serif;
  color: $dark;
}

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

h1, p {
 text-align: center;
}

.btn1{
  @include btn(0px, 100px);
  
  .icon-left {
    @include icon(8px, 30px);
    left: 0px; 
    
    &:before{
      @include icon-before(8px, 30px, -20px);
    }
    
    &:after{
      @include icon-after(8px, 30px, 20px);
    }
    
    &:hover{
      cursor: pointer;
    }
  }
  
  .icon-right {
    @include icon(8px, 30px);
    left: 30px;
    
    &:before{
      @include icon-before(8px, 30px, -20px);
    }
    
    &:after{
      @include icon-after(8px, 30px, 20px);
    }
  }
  
  &.open {
    .icon-left {
      transition-duration: 0.5s;
      background: transparent;
      
      &:before{
        transform: rotateZ(45deg) scaleX(1.4) translate(4px, 4px);
      }

      &:after{
        transform: rotateZ(-45deg) scaleX(1.4) translate(4px, -4px);
      }
    }
    
    .icon-right {
      transition-duration: 0.5s;
      background: transparent;  
      
      &:before{
        transform: rotateZ(-45deg) scaleX(1.4) translate(-4px, 4px);
      }

      &:after{
        transform: rotateZ(45deg) scaleX(1.4) translate(-4px, -4px);
      }
    }
  }
  &:hover {
    cursor: pointer;
  }
}

.btn2{
  @include btn(120px, 100px);
  
  .icon {
    @include icon(8px, 60px);
    
    &:before{
      @include icon-before(8px, 60px, -20px);
    }
    
    &:after{
      @include icon-after(8px, 60px, 20px);
    }
  }
  
  &.open {
    .icon {
      transition-duration: 0.5s;
      background: transparent;
      
      &:before{
        transform: rotateZ(45deg) scaleX(1.25) translate(13px, 13px);
      }

      &:after{
        transform: rotateZ(-45deg) scaleX(1.25) translate(12px, -12px);
      }
    }
  }
  &:hover {
    cursor: pointer;
  }
}

.btn3{
  @include btn(240px, 100px);
  
  .icon {
    @include icon(0px, 60px);
    
    &:before{
      @include icon-before(8px, 60px, -20px);
    }
    
    &:after{
      @include icon-after(8px, 60px, 20px);
    }
  }
  
  &.open {
    .icon {
      transition-duration: 0.5s;
      
      &:before{
        transform: rotateZ(135deg) scaleX(1.25) translate(13px, -13px);
      }

      &:after{
        transform: rotateZ(-135deg) scaleX(1.25) translate(12px, 12px);
      }
    }
  }
  &:hover {
    cursor: pointer;
  }
}

.btn4{
  @include btn(360px, 100px);
  
  .icon {
    @include icon(0px, 60px);
    
    &:before{
      @include icon-before(8px, 60px, -20px);
    }
    
    &:after{
      @include icon-after(8px, 60px, 20px);
    }
  }
  
  &.open {
    .icon {
      transition: 0.5s;
      
      &:before{
        transform: rotateZ(45deg) scaleX(1.25) translate(12px, 12px);
      }

      &:after{
        transform: rotateZ(-45deg) scaleX(1.25) translate(12px, -12px);
      }
    }
  }
  &:hover {
    cursor: pointer;
  }
}

.btn5{
  @include btn(0px, 200px);
  
  .icon {
    @include icon(8px, 60px);
    
    &:before{
      @include icon-before(8px, 60px, -20px);
    }
    
    &:after{
      @include icon-after(8px, 60px, 20px);
    }
  }
  
  &.open {
    .icon {
      transition: 0.5s;
      
      &:before{
        transform: rotateZ(-45deg) scaleX(0.75) translate(-20px, -6px);
      }

      &:after{
        transform: rotateZ(45deg) scaleX(0.75) translate(-20px, 6px);
      }
    }
  }
  &:hover {
    cursor: pointer;
  }
}

.btn6{
  @include btn(120px, 200px);
  
  .icon {
    @include icon(8px, 60px);
    
    &:before{
      @include icon-before(8px, 60px, -20px);
    }
    
    &:after{
      @include icon-after(8px, 60px, 20px);
    }
  }
  
  &.open {
    .icon {
      transition-duration: 0.5s;
      transform: rotateZ(180deg);
      
      &:before{
        transform: rotateZ(45deg) scaleX(0.75) translate(20px, -6px);
      }

      &:after{
        transform: rotateZ(-45deg) scaleX(0.75) translate(20px, 6px);
      }
    }
  }
  &:hover {
    cursor: pointer;
  }
}

.btn7{
  @include btn(240px, 200px);
  
  .icon-E {
    @include icon(8px, 60px);
    transition-delay: 0.5s;
    
    &:before{
      @include icon-before(8px, 60px, -20px);
    }
    
    &:after{
      @include icon-after(8px, 60px, 20px);
    }
  }
  
  .icon-X {
    @include icon(0px, 200px);
    transform: scaleX(0);
    transform-origin: 30px 0px;
    
    &:before{
      @include icon-before(8px, 60px, -20px);
      transform: rotateZ(45deg) scaleX(1.25) translate(12px, 12px);
    }
    
    &:after{
      @include icon-after(8px, 60px, 20px);
      transform: rotateZ(-45deg) scaleX(1.25) translate(12px, -12px);
    }
    
    &:hover{
      cursor: pointer;
    }
  }
  
  &.open {
    .icon-E {
      transition-duration: 0.5s;
      transform: scaleX(0);
      transition-delay: 0s;
    }
    
    .icon-X {
      transition: 0.5s;
      transition-delay: 0.5s;
      transform: scaleX(1);
    }
  }
  &:hover {
    cursor: pointer;
  }
}

.btn8{
  @include btn(360px, 200px);
  
  .icon-E {
    @include icon(8px, 60px);
    transform-origin: 0px 0px;
    transition-delay: 0.5s;
    
    &:before{
      @include icon-before(8px, 60px, -20px);
    }
    
    &:after{
      @include icon-after(8px, 60px, 20px);
    }
  }
  
  .icon-X {
    @include icon(0px, 60px);
    transform-origin: 0px 0px;
    transform: scaleY(0);
    
    &:before{
      @include icon-before(8px, 60px, -20px);
      transform: rotateZ(45deg) scaleX(1.25) translate(12px, 12px);
    }
    
    &:after{
      @include icon-after(8px, 60px, 20px);
      transform: rotateZ(-45deg) scaleX(1.25) translate(12px, -12px);
    }
  }
  
  &.open {
    .icon-E {
      transition-duration: 0.5s;
      transform: scaleY(0);
      transition-delay: 0s;
    }
    
    .icon-X {
      transition: 0.5s;
      transition-delay: 0.5s;
      transform: scaleY(1);
    }
  }
  &:hover {
    cursor: pointer;
  }
}

.btn9{
  @include btn(0px, 305px);
  
  .icon {
    @include icon(0px, 60px);
    transform: rotateZ(90deg);
    transform-origin: 30px 30px;
    left: -15;
    top: 0;
    
    &:before{
      @include icon-before(60px, 30px, 20px);
      top: 0;
    }
    
    &:after{
      @include icon-after(60px, 30px, 20px);
      top: 0;
      left: 30px;
    }
  }
  
  &.open {
    .icon {
      transition: all 0.5s;
      transform: rotateZ(0deg);
      
      &:before{
        width: 22.5px;
      }

      &:after{
        transform-origin: 30px 60px;
        transform: scaleX(0.75);
      }
    }
  }
  
  &.play {
    .icon {
      transition: all 0.5s;
      transform: rotateZ(0deg);
      
      &:before{
        width: 500px;
      }

      &:after{
        transform-origin: 30px 60px;
        transform: scaleX(2);
      }
    }
  }
  &:hover {
    cursor: pointer;
  }
}

.btn10{
  @include btn(120px, 300px);
  
  .icon {
    @include icon(8px, 60px);
    
    &:before{
      @include icon-before(8px, 60px, -20px);
    }
    
    &:after{
      @include icon-after(8px, 60px, 20px);
    }
  }
  
  &.open {
    .icon {
      transition-duration: 0.5s;
      transform: rotateZ(-180deg);
      
      &:before{
        transform: rotateZ(-45deg) scaleX(0.75) translate(-20px, -6px);
      }

      &:after{
        transform: rotateZ(45deg) scaleX(0.75) translate(-20px, 6px);
      }
    }
  }
  &:hover {
    cursor: pointer;
  }
}

.btn11{
  @include btn(240px, 300px);
  
  .icon-left {
    @include icon(4px, 15px);
    
    &:before{
      @include icon-before(4px, 15px, -10px);
    }
    
    &:after{
      @include icon-after(4px, 15px, 10px);
    }
    
    &:hover{
      cursor: pointer;
    }
  }
  
  .icon-right {
    @include icon(4px, 15px);
    left: 15px;
    
    &:before{
      @include icon-before(4px, 15px, -10px);
    }
    
    &:after{
      @include icon-after(4px, 15px, 10px);
    }
  }
  
  &.open {
    .icon-left {
      transition-duration: 0.5s;
      background: transparent;
      
      &:before{
        transform: rotateZ(45deg) scaleX(1.4) translate(2px, 2px);
      }

      &:after{
        transform: rotateZ(-45deg) scaleX(1.4) translate(2px, -2px);
      }
    }
    
    .icon-right {
      transition-duration: 0.5s;
      background: transparent;  
      
      &:before{
        transform: rotateZ(-45deg) scaleX(1.4) translate(-2px, 2px);
      }

      &:after{
        transform: rotateZ(45deg) scaleX(1.4) translate(-2px, -2px);
      }
    }
  }
  &:hover {
    cursor: pointer;
  }
}

.btn12{
  @include btn(315px, 300px);
  
  .icon {
    @include icon(4px, 30px);
    
    &:before{
      @include icon-before(4px, 30px, -10px);
    }
    
    &:after{
      @include icon-after(4px, 30px, 10px);
    }
  }
  
  &.open {
    .icon {
      transition-duration: 0.5s;
      background: transparent;
      
      &:before{
        transform: rotateZ(45deg) scaleX(1.25) translate(6.5px, 6.5px);
      }

      &:after{
        transform: rotateZ(-45deg) scaleX(1.25) translate(6px, -6px);
      }
    }
  }
  &:hover {
    cursor: pointer;
  }
}

.btn13{
  @include btn(390px, 300px);
  
  .icon {
    @include icon(4px, 30px);
    
    &:before{
      @include icon-before(4px, 30px, -10px);
    }
    
    &:after{
      @include icon-after(4px, 30px, 10px);
    }
  }
  
  &.open {
    .icon {
      transition: 0.5s;
      
      &:before{
        transform: rotateZ(-45deg) scaleX(0.75) translate(-10px, -3px);
      }

      &:after{
        transform: rotateZ(45deg) scaleX(0.75) translate(-10px, 3px);
      }
    }
  }
  &:hover {
    cursor: pointer;
  }
}

.btn14{
  @include btn(15px, 400px);
  
  .icon-circle {
    @include icon-circle(60px, 60px);
    &:hover {
      background: #fff;
    }
  }
  
  .icon {
    @include icon(4px, 30px);
    border-radius: 4px;
    
    &:before{
      @include icon-before(4px, 30px, -10px);
      border-radius: 4px;
    }
    
    &:after{
      @include icon-after(4px, 30px, 10px);
      border-radius: 4px;
    }
  }
  
  &.open {
    .icon-circle {
      background: #fff;
    }
    .icon {
      transition-duration: 0.5s;
      background: transparent;
      
      &:before{
        transform: rotateZ(45deg) scaleX(1.25) translate(6.5px, 6.5px);
      }

      &:after{
        transform: rotateZ(-45deg) scaleX(1.25) translate(6px, -6px);
      }
    }
  }
  &:hover {
    cursor: pointer;
  }
}

.btn15{
  @include btn(120px, 400px);
  
  .icon {
    @include icon(4px, 30px);
    border-radius: 4px;
    left: 15px;
    
    &:before{
      @include icon-before(4px, 30px, -10px);
      border-radius: 4px;
    }
    
    &:after{
      @include icon-after(4px, 30px, 10px);
      border-radius: 4px;
    }
  }
  
  &.open {
    .icon {
      transition-duration: 0.5s;
      background: transparent;
      
      &:before{
        transform: rotateZ(45deg) scaleX(1.25) translate(6.5px, 6.5px);
      }

      &:after{
        transform: rotateZ(-45deg) scaleX(1.25) translate(6px, -6px);
      }
    }
  }
  &:hover {
    background: #fff;
    cursor: pointer;
  }
}

View Compiled

$('.menu').click (function(){
  $(this).toggleClass('open');
});

This Pen is owned by Álvaro on CodePen. It is a fork of this Pen.

See more by @alvarotrigo on CodePen

External CSS

https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css

External JavaScript

https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js