title: Transform hamburger icon when clicking link
body: <p>I'm making a hamburger menu where an overlay menu div fills the screen when clicking the hamburger icon (which is animated to a cross when clicked).</p>
  
  <p>I want the hamburger to change back to it's original state when clicking any menu link at the same time as it hides the overlay div.</p>
  
  <p>Is there an easy way to implement this in the menu links?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function funcToggle() {
    $("#Overlay").toggle("slow");
  }
  
  function funcHide() {
    $("#Overlay").toggle("slow");
  }
  
  document.querySelector("#nav-toggle")
    .addEventListener("click", function() {
      this.classList.toggle("active");
    });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#nav-toggle span {
    position: absolute;
    margin-top: 10px;
  }
  
  #nav-toggle span,
  #nav-toggle span:before,
  #nav-toggle span:after {
    cursor: pointer;
    border-radius: 4px;
    height: 3px;
    width: 18px;
    background: #1098fe;
    position: absolute;
    display: block;
    content: '';
  }
  
  #nav-toggle span:before {
    top: -5px;
  }
  
  #nav-toggle span:after {
    bottom: -5px;
  }
  
  #nav-toggle span,
  #nav-toggle span:before,
  #nav-toggle span:after {
    transition: all 500ms ease-in-out;
  }
  
  #nav-toggle.active span {
    background-color: transparent;
  }
  
  #nav-toggle.active span:before,
  #nav-toggle.active span:after {
    top: 0;
  }
  
  #nav-toggle.active span:before {
    transform: rotate(45deg);
    background: #fe0000;
  }
  
  #nav-toggle.active span:after {
    transform: rotate(-45deg);
    background: #fe0000;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div id="show" class="show"&gt;
    &lt;nav&gt;
      &lt;a id="nav-toggle" href="#" onclick="funcToggle()"&gt;&lt;span&gt;&lt;/span&gt;&lt;/a&gt;
    &lt;/nav&gt;
  &lt;/div&gt;
  &lt;div id="Overlay" name="Overlay" class="overlay"&gt;
    &lt;ul class="hamburger_menu"&gt;
      &lt;li&gt;&lt;a href="#top" onclick="funcHide()"&gt;TOP&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#newsletter" onclick="funcHide()"&gt;NEWSLETTER&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#videos" onclick="funcHide()"&gt;VIDEOS&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#contact" onclick="funcHide()"&gt;CONTACT&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>