Sidebar Menu

by hmdadou

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...

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;
    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(244px, 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...

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)) {
         ...