title: Animate SVG Hamburger menu icon on click and keep it in :active state
body: <p>I have a SVG hamburger menu icon that is animated when clicked. The goal is to transform it in to a "close" button when you activate the side-push menu. I need some help achieving that:</p>
  
  <p><a href="http://jsfiddle.net/a6ysa9zk/" rel="nofollow">http://jsfiddle.net/a6ysa9zk/</a></p>
  
  <p>HTML:</p>
  
  <pre><code>    &lt;div class="toggle-menu menu-right push-body"&gt;
  
      &lt;svg class="inline-svg" width="42px" height="42px" viewBox="0 0 42 42" enable-background="new 0 0 32 22.5" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"&gt;
          &lt;!-- Generator: Sketch 3.0.4 (8054) - http://www.bohemiancoding.com/sketch --&gt;
          &lt;title&gt;Group&lt;/title&gt;
          &lt;desc&gt;Created with Sketch.&lt;/desc&gt;
          &lt;defs&gt;&lt;/defs&gt;
  
          &lt;g class="svg-menu-toggle" sketch:type="MSLayerGroup"&gt;
              &lt;circle class="round" fill="#3B3B41" sketch:type="MSShapeGroup" cx="21" cy="21" r="21"&gt;&lt;/circle&gt;
              &lt;rect class="bar" fill="#F2F2F2" sketch:type="MSShapeGroup" x="12" y="26" width="18" height="4"&gt;&lt;/rect&gt;
              &lt;rect class="bar" fill="#F2F2F2" sketch:type="MSShapeGroup" x="12" y="19" width="18" height="4"&gt;&lt;/rect&gt;
              &lt;rect class="bar" fill="#F2F2F2" sketch:type="MSShapeGroup" x="12" y="12" width="18" height="4"&gt;&lt;/rect&gt;
          &lt;/g&gt;
  
      &lt;/svg&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.svg-menu-toggle {
      fill: #fff;
      pointer-events: all;
      cursor: pointer;
  }
  .svg-menu-toggle .round {
      transition: fill .4s ease-in-out;
  }
  .svg-menu-toggle .bar {
      -webkit-transform: rotate(0) translateY(0) translateX(0);
      transform: rotate(0) translateY(0) translateX(0);
      opacity: 1;
      -webkit-transform-origin: 20px 10px;
      transform-origin: 20px 10px;
      -webkit-transition: -webkit-transform 0.4s ease-in-out, opacity 0.2s ease-in-out, fill .4s ease-in-out;
      transition: transform 0.4s ease-in-out, opacity 0.2s ease-in-out, fill .4s ease-in-out;
  }
  .svg-menu-toggle .bar:nth-of-type(1) {
      -webkit-transform-origin: 20px 10px;
      transform-origin: 20px 10px;
  }
  .svg-menu-toggle .bar:nth-of-type(3) {
      -webkit-transform-origin: 20px 20px;
      transform-origin: 20px 20px;
  }
  .svg-menu-toggle:active .bar:nth-of-type(1) {
      -webkit-transform: rotate(-45deg) translateY(-10px) translateX(-8px);
      transform: rotate(-45deg) translateY(-10px) translateX(-8px);
      fill: #3B3B41;
  }
  .svg-menu-toggle:active .bar:nth-of-type(2) {
      opacity: 0;
  }
  .svg-menu-toggle:active .bar:nth-of-type(3) {
      -webkit-transform: rotate(45deg) translateY(6px) translateX(0px);
      transform: rotate(45deg) translateY(6px) translateX(0px);
      fill: #3B3B41;
  }
  .svg-menu-toggle:active .round {
      fill: #F2F2F2;
  }
  </code></pre>
  
  <p>Javascript for menu toggle:</p>
  
  <pre><code>     jQuery(document).ready(function ($) {
          $('.toggle-menu').jPushMenu();
      });
  </code></pre>