Data-driven Slide-out Menu for Jekyll

main.js

---
layout: null
library: jquery-2.1.3.min.js
---
// If using a JS framework, include it here
{% include_relative _lib/{{page.library}} %}

// Application code goes here
$(document).ready(function(){
  $('.js-menu-trigger').on('click touchstart', function(e){
    $('.js-menu').toggleClass('is-visible');
    $('.js-menu-screen').toggleClass('is-visible');
    e.preventDefault();
  });

  $('.js-menu-screen').on('click touchstart', function(e){
    $('.js-menu').toggleClass('is-visible');
    $('.js-menu-screen').toggleClass('is-visible');
    e.preventDefault();
  });
});

nav.html

<button type="button" class="js-menu-trigger sliding-menu-button">
  <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/menu-white.png" alt="Menu Icon">
</button>

<nav class="js-menu sliding-menu-content">
  <ul>
    <li><a href="javascript:void(0)">Close link goes here</a></li>
    {% for page in site.data.nav %}
    <li><a href="{{site.baseurl}}{{page.href}}">{{page.title}}</a></li>
    {% endfor %}
  </ul>
</nav>

<div class="js-menu-screen menu-screen"></div>

nav.scss

$sliding-menu-border-color: $dark-gray;
$sliding-menu-background: lighten($sliding-menu-border-color, 5);
$sliding-menu-color: #fff;
$sliding-menu-border: 1px solid $sliding-menu-border-color;
$sliding-menu-background-hover: $base-accent-color;
$sliding-menu-color-hover: #fff;

.sliding-menu-button {
  display: inline-block;
  cursor: pointer;
  font-size: $base-font-size;
  margin-bottom: $base-line-height;
  position: fixed;

  right: 1rem;
  top: 1rem;

  outline: none;

  img {
    height: 1.3em;
  }
}

.sliding-menu-content {
  @include position(fixed, 0px 0px 0px auto);
  @include size(220px 100%);
  @include transform(translateX(220px));
  @include transition(all .2s linear);
  background: $sliding-menu-background;
  z-index: 999999;
  overflow-y: none;
  -webkit-overflow-scrolling: touch;

  li {
    list-style-type: none;
  }

  li a {
    border-bottom: $sliding-menu-border;
    color: $sliding-menu-color;
    display: block;
    font-weight: bold;
    padding: 1em;

    &:hover {
      background-color: $sliding-menu-background-hover;
      color: $sliding-menu-color-hover;
    }
  }

  &.is-visible {
    @include transform(translateX(0));
  }
}

.menu-screen {
  @include position(fixed, 0px 0px 0px 0px);
  @include transition;
  background: $sliding-menu-border-color;
  opacity: 0;
  visibility: hidden;
  z-index: 999998;

  &.is-visible {
    opacity: .4;
    visibility: visible;
  }
}

// Based on code by Diego Eis