<body>
  <header>
    <h1>
      alternative burger menu animation
    </h1>
    <label>
      click the burger below ⬇️
    </label>
  </header>
  <div class="content">
    <a class="menu" href="#">
        <svg id="the-svg" version="1.1" x="0px" y="0px" width="30px" height="29px" viewBox="0 0.5 30 29" enable-background="new 0 0.5 30 29" xml:space="preserve">
        <path id="the-burger" fill="none" stroke="#BADBAD" stroke-width="5" stroke-linecap="square" stroke-linejoin="bevel" stroke-miterlimit="10" d="M0,6.117h30.5c2.484,0,4.5,2.015,4.5,4.5c0,2.484-2.016,4.5-4.5,4.5h-30c-2.485,0-4.5,2.016-4.5,4.5s2.015,4.5,4.5,4.5H30h9.5
        l-25.833-9.469L39.5,5.883"/>
        </svg>
    </a>
  </div>
  
  
</body>
@import "compass/css3";

// style for the burger svg icon
#the-burger {
	stroke: #fff;
	stroke-dashoffset: 25px;
	stroke-dasharray: 143px;
	transition: stroke-dashoffset 0.6s cubic-bezier(0.215, 0.61, 0.355, 1), stroke-dasharray 0.4s;
}
.menu.clicked {
  border-left: 100px solid #692F2F;
  margin-left: 100px;
  #the-burger {
    stroke-dashoffset: 179px;
    stroke-dasharray: 159px;
  }
}




// not very important style
body {
  background-color: #C55;
  color: #692F2F;
  font-family: georgia, serif;
  text-transform: lowercase;
}
header,
.content {
  padding: 20px;
  text-align: center;
  h1 {
    font-weight: normal;
  }
}
.menu {
  padding: 30px 15px;
  border-left: 2px solid #692F2F;
  transition: all 0.5s;
}
label {
  font-size: 13px;
  display: block;
  margin: 15px 0 30px;
}
$(".menu").click(function () {
	   			$(this).toggleClass("clicked");
	});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js