Side menu

by Marco Abate

HTML

<script src="http://code.interactjs.io/interact-1.2.4.min.js"></script>
<div class="app-view"></div>
<div class="side-view closed draggable"></div>

CSS

body {
    margin: 0;
}

.app-view {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: yellow;
}

.side-view {
    position: fixed;
    max-width: 65%;
    top: 0;
    left: 100%;
    right: -100%;
    bottom: 0;
    background: red;
}

.side-view.animate {
      -webkit-transition: all 0.4s ease 0s;
}

.side-view.open {
    -webkit-transform: translateX(-274px);
}

.side-view.closed {
    -webkit-transform: translateX(0);
}

JavaScript

var width = $(window).width();
var panelWidth = $('.side-view').width();
var margin = 15;
var panelMargin = panelWidth - margin;
var minMov = 100;
$('.draggable').css('margin-left', 0 - margin + 'px');

interact('.draggable').draggable({
    inertia: false,
    restrict: {
        endOnly: false,
        elementRect: {
            top: 0,
            left: 0,
            bottom: 0,
            right: 0
        }
    },
    onmove: dragMoveListener,
    onend: function (event) {
        var finalX = Math.abs(event.dx);
        var target = event.target;
        var isOpen = target.classList.contains('open');
        if(isOpen) {
            if(finalX > minMov) {
                closePanel(target);
            } else {
                openPanel(target);
            }
        } else {
            if(finalX > minMov) {
                openPanel(target);
            } else {
                closePanel(target);
            }
        }
    }
});

function dragMoveListener (event) {
    var target = event.target;
    x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx;
    target.classList.remove('animate');
    var isOpen = target.classList.contains('open');
    if(x >= (0 - panelMargin)) {
        target.style.webkitTransform = 'translateX(' + x + 'px)';
        target.setAttribute('data-x', x);
    } else {
        x = 0 - x + panelMargin;
        target.style.webkitTransform = 'translateX(' + x + 'px)';
        target.setAttribute('data-x', x);
    }
}

window.dragMoveListener = dragMoveListener;

var openPanel = function(target) {
    target.classList.add('animate');
    target.setAttribute('data-x', 0 - panelMargin);
    target.style.webkitTransform = 'translateX(-' + panelMargin + 'px)';
    target.classList.remove('closed');
    target.classList.add('open');
}

var closePanel = function(target) {
    target.classList.add('animate');
    target.setAttribute('data-x', 0);
    target.style.webkitTransform = 'translateX(' + 0 + 'px)';
   ...