Sidebar Menu

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.1/css/foundation.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.1/js/foundation.min.js"></script>
<div id="sbContainer" class="sbContainer">
    <div class="sbPush">
        <header class="contain-to-grid sbMenu sbFX">
            <nav class="top-bar" data-topbar>
                <ul class="title-area show-for-small-only">
                    <li class="name"><a href="#">Name</a></li>
                    <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
                </ul>
                <section class="top-bar-section">
                    <ul class="left">
                        <li><a href="#"><span data-hover="Home">Home</span></a></li>
                        <li><a href="#"><span data-hover="About">About</span></a></li>
                        <li><a href="#"><span data-hover="Blog">Blog</span></a></li>
                        <li><a href="#"><span data-hover="Contact us">Contact us</span></a></li>
                        <li><a href="#"><span data-hover="Portfolio">Portfolio</span></a></li>
                        <li><a href="#"><span data-hover="Services">Services</span></a></li>
                    </ul>
                </section>
            </nav>
            <div class="sbMenuFooter show-for-medium-up" itemscope itemtype="http://schema.org/LocalBusiness">
                <div class="row sbMenuAddress" itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
                    <div class="small-12 columns" itemprop="streetAddress">Flat Number <br>Road Name</div>
                    <div class="small-12 columns"><span itemprop="addressLocality">Area Name</span>, <span itemprop="addressRegion">Region</span></div>
                    <div class="small-12 columns"><span itemprop="postalCode">Postcode</span>, <span itemprop="addressCountry">UK</span></div>
                </div>
                <div...

CSS

body{background:#fff;}
html, body, p, span, a{font-family: 'Raleway', sans-serif;}
h1, h2, h3, h4, h5, h6{font-family: 'Raleway', sans-serif;}
html, body, .sbContainer, .sbPush, .sbContent-one{height:100%;}
.sbContent-one{overflow-x:hidden;background:#fff;position:relative;}
.sbContainer{position:relative;overflow:hidden;}
.sbPush{position:relative;left:0;z-index:99;height:100%;-webkit-transition:-webkit-transform 0.5s;transition:transform 0.5s;}
.sbPush::after{position:absolute;top:0;right:0;width:0;height:0;background: rgba(0,0,0,0.2);content:'';opacity:0;-webkit-transition:opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;transition:opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;}
.sbMenu-open .sbPush::after{width:100%;height:100%;opacity:1;-webkit-transition:opacity 0.5s;transition:opacity 0.5s;}
.sbMenu{position:absolute;top:0;left:0;z-index:100;visibility:hidden;width:244px;height:100%;background:#872734;-webkit-transition:all 0.5s;transition:all 0.5s;}
.sbMenu::after{position:absolute;top:0;right:0;width:100%;height:100%;background:rgba(0,0,0,0.2);content:'';opacity:1;-webkit-transition:opacity 0.5s;transition:opacity 0.5s;}
.sbMenu-open .sbMenu::after{width:0;height:0;opacity:0;-webkit-transition:opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;transition:opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;}
.sbFX.sbMenu-open .sbPush{-webkit-transform: translate3d(300px, 0, 0);transform: translate3d(244px, 0, 0);}
.sbFX.sbMenu{-webkit-transform: translate3d(-100%, 0, 0);transform: translate3d(-100%, 0, 0);}
.sbFX.sbMenu-open .sbFX.sbMenu {visibility: visible;-webkit-transition:-webkit-transform 0.5s;transition:transform 0.5s;}
.sbFX.sbMenu::after{display:none;}
.no-csstransforms3d .sbPush, .no-js .sbPush{padding-left:244px;}
.sbMenuTrigger{background-color:#b23445;cursor:pointer;height:100%;width:100px;position:fixed;left:0;top:0;}
.sbMenu .top-bar {background:#872734!important;}
.sbMenu...

JavaScript

(function($){$(document).foundation();})(jQuery);

( function( window ) {

'use strict';

// class helper functions from bonzo https://github.com/ded/bonzo

function classReg( className ) {
  return new RegExp("(^|\\s+)" + className + "(\\s+|$)");
}

// classList support for class management
// altho to be fair, the api sucks because it won't accept multiple classes at once
var hasClass, addClass, removeClass;

if ( 'classList' in document.documentElement ) {
  hasClass = function( elem, c ) {
    return elem.classList.contains( c );
  };
  addClass = function( elem, c ) {
    elem.classList.add( c );
  };
  removeClass = function( elem, c ) {
    elem.classList.remove( c );
  };
}
else {
  hasClass = function( elem, c ) {
    return classReg( c ).test( elem.className );
  };
  addClass = function( elem, c ) {
    if ( !hasClass( elem, c ) ) {
      elem.className = elem.className + ' ' + c;
    }
  };
  removeClass = function( elem, c ) {
    elem.className = elem.className.replace( classReg( c ), ' ' );
  };
}

function toggleClass( elem, c ) {
  var fn = hasClass( elem, c ) ? removeClass : addClass;
  fn( elem, c );
}

var classie = {
  // full names
  hasClass: hasClass,
  addClass: addClass,
  removeClass: removeClass,
  toggleClass: toggleClass,
  // short names
  has: hasClass,
  add: addClass,
  remove: removeClass,
  toggle: toggleClass
};

// transport
if ( typeof define === 'function' && define.amd ) {
  // AMD
  define( classie );
} else {
  // browser global
  window.classie = classie;
}

})( window );

var SidebarMenuEffects = (function() {

 	function hasParentClass( e, classname ) {
		if(e === document) return false;
		if( classie.has( e, classname ) ) {
			return true;
		}
		return e.parentNode && hasParentClass( e.parentNode, classname );
	}

	// http://coveroverflow.com/a/11381730/989439
	function mobilecheck() {
		var check =...