<section class="content">
  <a href="#" id="trigger">Menu</a>
  <ul id="menu">
    <li class="menu-item"><a href="#anchor">Anchor link</a></li>
    <li class="menu-item"><a href="/example">Non-anchor link</a></li>
  </ul>
  <div>
    <p>Filler content.</p>
    <p>Fusce vel pulvinar libero, vitae dignissim quam. Nunc ut fermentum libero. Aenean odio sem, fringilla eu eros at, eleifend egestas libero. Curabitur nec cursus lorem. Integer scelerisque sed orci sit amet consectetur.</p>
  </div>
  <div id="anchor">
    <p>Anchor content.</p>
    <p>Filler content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque nisi lacus, rhoncus vitae leo eu, maximus varius urna. Pellentesque tempor felis ac egestas dapibus. Quisque ullamcorper sem porttitor ornare porttitor. Suspendisse vitae blandit justo, a sollicitudin tortor. Sed leo lorem, cursus id sapien quis, tincidunt fringilla leo. Suspendisse fermentum massa vel ultrices rutrum. Nunc tincidunt, quam ut sagittis molestie, ipsum arcu consectetur nunc, et venenatis elit purus eget neque. Maecenas lobortis hendrerit auctor. Fusce vel pulvinar libero, vitae dignissim quam. Nunc ut fermentum libero. Aenean odio sem, fringilla eu eros at, eleifend egestas libero. Curabitur nec cursus lorem. Integer scelerisque sed orci sit amet consectetur.</p>
    <p>Cras non efficitur lorem. Sed eu nisi ex. Fusce id mi vitae justo dapibus iaculis in eu nibh. Vivamus eget eros quis tortor tristique mattis non et mauris. Donec scelerisque quis justo sit amet porttitor. Phasellus scelerisque dolor sit amet bibendum vulputate. Etiam nec ligula neque. Aenean et enim nisl. Sed aliquam quam non turpis suscipit, ac convallis lacus commodo. Aenean vestibulum nisi eget lobortis auctor. Proin quis dui quam. Donec ut tortor mollis, maximus nunc vitae, commodo elit. Donec scelerisque massa faucibus risus iaculis pretium. Morbi hendrerit lorem nec dolor interdum venenatis a vel mauris. Vivamus dictum volutpat ex id semper. Mauris rhoncus lorem at turpis efficitur, non ultricies sem porttitor.</p>
    <p> Maecenas id semper neque. Sed blandit nisi vitae pharetra tincidunt. Maecenas sapien augue, pretium non felis vitae, pellentesque aliquam velit. Sed vel lectus nisi. Pellentesque eleifend posuere nisl. Praesent ornare nunc eu sapien vulputate dapibus. Sed aliquam efficitur viverra. Ut auctor massa hendrerit sapien molestie laoreet. Aliquam facilisis felis vel molestie tincidunt. Donec vel elit mauris. Proin imperdiet magna eget sapien lobortis, sit amet venenatis ex feugiat.</p>
    <p>Fusce fermentum convallis dapibus. Aliquam maximus tincidunt sollicitudin. Suspendisse fringilla pulvinar ornare. Aliquam nulla turpis, laoreet vitae lobortis eget, imperdiet in nunc. Duis eu tempus libero. Morbi consectetur convallis vestibulum. Nulla fringilla orci nec magna euismod scelerisque. Morbi id iaculis sem. Duis varius ultricies malesuada. Nunc id ornare ante, sed varius turpis. Fusce vitae tristique dui. Praesent nec nunc semper, pretium velit et, sodales nisl. Nullam vulputate ex eget volutpat lacinia. Donec vitae ornare mi. Quisque sed nisi vitae eros luctus pulvinar.</p>
  </div>
</section>

.content {
  position: relative;
}
#trigger:after {
  content: '+';
}
#trigger.open:after {
  content: '-';
}
#menu { 
  display: none; 
}
#menu.open { 
  display: block; 
  position: absolute; top: 2.4em; left: 0;
  height: 100%;
  width: 70%;
}

/* Other styles */
html { 
  background: #00ced1;
}
body {
  font-family: 'Open Sans', Helvetica, Arial, sans-serif;
  margin: 0;
}
.content { 
  background: white;
  margin: 0 auto; 
  min-width: 500px;
  width: 50%; 
}
#trigger, #menu {
  background: #000;
  color: #fff;
  font-weight: bold;
}
#trigger {
  display: block;
  padding: 1em;
  text-decoration: none;
  text-transform: uppercase;
}
#trigger:after {
  float: right;
}
#menu { 
  list-style: none; 
  padding: 0; 
}
#menu li { 
  padding: .5em 1em; 
}
#menu a {
  color: #fff;
}
div {
  padding: 0 1em;
}
div#anchor {
  padding-bottom: 1em;
}

// Set up variables
var menuTrigger = document.getElementById('trigger');
var menuContent = document.getElementById('menu');
var menuItems = document.getElementsByClassName('menu-item');

// Basic menu toggle
function menuToggle() {
  menuTrigger.classList.toggle('open');
  menuContent.classList.toggle('open');
}

// Toggle menu on trigger click
menuTrigger.onclick = function(){
  menuToggle();
}

// Toggle menu on same-page anchor click
var windowHref = window.location.protocol + '//' + window.location.host + window.location.pathname; // Don't include any existing anchors in URL

for (var i = 0; i < menuItems.length; i++) {
  menuItems[i].onclick = function(e){
    var linkHref = this.getElementsByTagName('a')[0].href;
    if (linkHref.indexOf(windowHref) > -1) { // If the window's URL is found within the menu item's URL, toggle the menu
      menuToggle();
    }
  }
}