title: Close hamburger menu when click on anchor links on same page
body: <p>I'm using this Pure CSS hamburger menu code: <a href="https://codepen.io/erikterwan/pen/EVzeRP" rel="nofollow noreferrer">https://codepen.io/erikterwan/pen/EVzeRP</a></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-css lang-css prettyprint-override"><code>/*
   * Made by Erik Terwan
   * 24th of November 2015
   * MIT License
   *
   *
   * If you are thinking of using this in
   * production code, beware of the browser
   * prefixes.
   */
  
  body
  {
    margin: 0;
    padding: 0;
    
    /* make it look decent enough */
    background: #232323;
    color: #cdcdcd;
    font-family: "Avenir Next", "Avenir", sans-serif;
  }
  
  a
  {
    text-decoration: none;
    color: #232323;
    
    transition: color 0.3s ease;
  }
  
  a:hover
  {
    color: tomato;
  }
  
  #menuToggle
  {
    display: block;
    position: relative;
    top: 50px;
    left: 50px;
    
    z-index: 1;
    
    -webkit-user-select: none;
    user-select: none;
  }
  
  #menuToggle input
  {
    display: block;
    width: 40px;
    height: 32px;
    position: absolute;
    top: -7px;
    left: -5px;
    
    cursor: pointer;
    
    opacity: 0; /* hide this */
    z-index: 2; /* and place it over the hamburger */
    
    -webkit-touch-callout: none;
  }
  
  /*
   * Just a quick hamburger
   */
  #menuToggle span
  {
    display: block;
    width: 33px;
    height: 4px;
    margin-bottom: 5px;
    position: relative;
    
    background: #cdcdcd;
    border-radius: 3px;
    
    z-index: 1;
    
    transform-origin: 4px 0px;
    
    transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                opacity 0.55s ease;
  }
  
  #menuToggle span:first-child
  {
    transform-origin: 0% 0%;
  }
  
  #menuToggle span:nth-last-child(2)
  {
    transform-origin: 0% 100%;
  }
  
  /* 
   * Transform all the slices of hamburger
   * into a crossmark.
   */
  #menuToggle input:checked ~ span
  {
    opacity: 1;
    transform: rotate(45deg) translate(-2px, -1px);
    background: #232323;
  }
  
  /*
   * But let's hide the middle one.
   */
  #menuToggle input:checked ~ span:nth-last-child(3)
  {
    opacity: 0;
    transform: rotate(0deg) scale(0.2, 0.2);
  }
  
  /*
   * Ohyeah and the last one should go the other direction
   */
  #menuToggle input:checked ~ span:nth-last-child(2)
  {
    transform: rotate(-45deg) translate(0, -1px);
  }
  
  /*
   * Make this absolute positioned
   * at the top left of the screen
   */
  #menu
  {
    position: absolute;
    width: 300px;
    margin: -100px 0 0 -50px;
    padding: 50px;
    padding-top: 125px;
    
    background: #ededed;
    list-style-type: none;
    -webkit-font-smoothing: antialiased;
    /* to stop flickering of text in safari */
    
    transform-origin: 0% 0%;
    transform: translate(-100%, 0);
    
    transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
  }
  
  #menu li
  {
    padding: 10px 0;
    font-size: 22px;
  }
  
  /*
   * And let's slide it in from the left
   */
  #menuToggle input:checked ~ ul
  {
    transform: none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!--    Made by Erik Terwan    --&gt;
  &lt;!--   24th of November 2015   --&gt;
  &lt;!--        MIT License        --&gt;
  &lt;nav role="navigation"&gt;
    &lt;div id="menuToggle"&gt;
      &lt;!--
      A fake / hidden checkbox is used as click reciever,
      so you can use the :checked selector on it.
      --&gt;
      &lt;input type="checkbox" /&gt;
      
      &lt;!--
      Some spans to act as a hamburger.
      
      They are acting like a real hamburger,
      not that McDonalds stuff.
      --&gt;
      &lt;span&gt;&lt;/span&gt;
      &lt;span&gt;&lt;/span&gt;
      &lt;span&gt;&lt;/span&gt;
      
      &lt;!--
      Too bad the menu has to be inside of the button
      but hey, it's pure CSS magic.
      --&gt;
      &lt;ul id="menu"&gt;
        &lt;a href="#"&gt;&lt;li&gt;Home&lt;/li&gt;&lt;/a&gt;
        &lt;a href="#"&gt;&lt;li&gt;About&lt;/li&gt;&lt;/a&gt;
        &lt;a href="#"&gt;&lt;li&gt;Info&lt;/li&gt;&lt;/a&gt;
        &lt;a href="#"&gt;&lt;li&gt;Contact&lt;/li&gt;&lt;/a&gt;
        &lt;a href="https://erikterwan.com/" target="_blank"&gt;&lt;li&gt;Show me more&lt;/li&gt;&lt;/a&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/nav&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The problem i'm having is that it remains open when I click on a menu item as it is a one-page site with anchor links. What would be the best method to close the menu on click of any of the menu item links? Using javascript to remove the menu onclick is not a good option because the X also needs to revert back to a hamburger and it doesn't if you use this method. Any help appreciated, thanks in advance!</p>