How to make overlay-menu return to default state when menu link is clicked

Question

I've been trying to make a overlay-menu I have tweaked, return to default state when I press one of the menu buttons/options. I don't know how to do this, but I suspect I need some JavaScript magic to make this work. (I don't know how to JavaScript though, which is a problem)

var toggle = document.getElementById("toggle");
var navItems = document.querySelectorAll(".scroll");

for (var i = 0; i < navItems.length; i++) {
    navItems[i].addEventListener("click", function() {
        toggle.checked = !toggle.checked;
    });
}

html,
body {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
}
*,
*:before,
*:after {
  box-sizing: border-box;
}
nav,
nav ul {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 69;
}
nav {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.3);
  opacity: 0;
  -webkit-transform: scale(0.3);
          transform: scale(0.3);
  -webkit-transition: all 0.25s;
  transition: all 0.25s;
}
nav ul li {
  display: table;
  width: 100%;
  height: calc(100% /6);
  border-bottom: 1px solid rgba(255,255,255,0.3);
  background: rgba(121, 117, 216, 0.8);
  -webkit-perspective: 0px;
          perspective: 0px;
  -webkit-transform: rotateX(-90deg) scale(0.5);
          transform: rotateX(-90deg) scale(0.5);
  -webkit-transition: all 0.3s ease 0.1s;
  transition: all 0.3s ease 0.1s;
}
nav ul li a {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  text-decoration: none;
  font-size: 2.5em;
  letter-spacing: 0.2em;
  color: #fff;
  text-shadow: 0 0 3px rgba(0,0,0,0.3);
  font-family: 'Helvetica', sans-serif;
  font-weight: 100;
}
nav ul li a:hover {
  background: rgba(255,255,255,0.1);
}
#toggle {
  display: none;
}
#toggle + #toggle-btn,
.nav-icon {
  position: fixed;
  top: 15px;
  right: 15px;
  border-radius: 3px;
  cursor: pointer;
}
#toggle + #toggle-btn {
  height: 40px;
  width: 40px;
  z-index: 1000;
  background: rgba(0,0,0,0.05);
}
.nav-icon,
.nav-icon:before,
.nav-icon:after {
  position: fixed;
  height: 4px;
  width: 40px;
  margin: 18px 0;
  z-index: 900;
  border-radius: 3px;
  background: rgba(121, 117, 216, 0.8);
  -webkit-transition: all 0.25s;
  transition: all 0.25s;
}
.nav-icon:before {
  content: "";
  margin-top: -18px;
}
.nav-icon:after {
  content: "";
  margin-top: 18px;
}
#toggle:checked ~ nav {
  opacity: 1;
  -webkit-transform: scale(0.8);
          transform: scale(0.8);
}
#toggle:checked ~ .nav-icon {
  background: rgba(255,0,0,0);
}
#toggle:checked ~ .nav-icon:before {
  -webkit-transform: rotate(-225deg);
          transform: rotate(-225deg);
  margin-top: 0;
}
#toggle:checked ~ .nav-icon:after {
  -webkit-transform: rotate(225deg);
          transform: rotate(225deg);
  margin-top: 0;
}
#toggle:checked ~ nav ul li {
  -webkit-transform: rotateY(0deg) scale(1);
          transform: rotateY(0deg) scale(1);
}

<header>
  <input type="checkbox" id="toggle"/>
  <label for="toggle" id="toggle-btn"></label>
  <div class="nav-icon"></div>
  <nav data-state="close">
    <ul>
      <li><a href="#about" class="scroll">Om Meg</a></li>
      <li><a href="#skills" class="scroll">Mine Skills</a></li>
      <li><a href="#education" class="scroll">Utdanning</a></li>
      <li><a href="#portfolio" class="scroll">Portfolio</a></li>
      <li><a href="#references" class="scroll">Referanser</a></li>
      <li><a href="#contact" class="scroll">Kontakt Meg</a></li>
    </ul>
  </nav>
</header>

Thanks for reading through my post, and hopefully it's nothing major.

Answer 1

Here's a pretty straightforward solution using a bit of JavaScript.

var toggle = document.getElementById("toggle");
var navItems = document.querySelectorAll(".scroll");

for (var i = 0; i < navItems.length; i++) {
    navItems[i].addEventListener("click", function() {
        toggle.checked = !toggle.checked;
    });
}

What's happening here is we've attached a click event listener to every single menu item. This is done by querying and looping through all menu elements via the "scroll" class. Once any of these elements is clicked, the toggle input's "checked" property is flipped.

The rest is handled by the CSS already available in your Pen :)