Push Menu

==================
HTML:

<body>
    <div id="overlayContainer"></div>
    	<div class="side-menu side-menu--left">
	    <a href="#" class="side-menu__close jsCloseUserMenu" data-side="left">close</a>
	</div>
	<div class="side-menu side-menu--right">
	</div>
	<header class="header">
        <a href="#" class="open-left">open></a>
    </header>
	<div>
		PAGE CONTENT
	</div>
</body>

==================
SASS:

$pushMenuWidth : 280px;
.side-menu {
    position: fixed;
    top: 0;
    overflow: auto;
    width: $pushMenuWidth;
    height: 100%;
    z-index: 202;
    /* Vertical menu that slides from the left or right */
    &.side-menu--left {
        left: -$pushMenuWidth;
        transition: left 0.5s ease;
        .side-menu--left--open & {
            &.side-menu--left {
                left: 0;
                box-shadow: 1px 2px 4px rgba(0,0,0,.2);
            }
        }
    }
    &.side-menu--right {
        right: -$pushMenuWidth;
        transition: right 0.5s ease;
        .side-menu--right--open & {
            &.side-menu--right {
                right: 0;
            }
        }
    }
}

===============================
JS:

YP.UserMenu = (function($) {
    var userMenu = {
        menuVar : {
            $body : $('body')
        },

        _init: function () {
            userMenu._btnEvents('.open-left', 'side-menu--left--open');
            userMenu._btnEvents('.open-right', 'side-menu--right--open');
            userMenu._closeBtn();
        },

        _btnEvents : function(selectorStr, toggleClass){
            $('.header').on('click', selectorStr, function(e){
                e.preventDefault();
                e.stopPropagation();
                userMenu.menuVar.$body.toggleClass(toggleClass);
            });
        },

        _removeOpenClassBody: function(){
            userMenu.menuVar.$body.removeClass('side-menu--left--open side-menu--right--open');
        },

        _closeBtn : function(){
            $('.side-menu').on('click', '.jsCloseUserMenu', function(e){
                e.preventDefault();
                userMenu._removeOpenClassBody();
            });

            $('#overlayContainer').click(function(){
                userMenu._removeOpenClassBody();
            });
        }
    };

    $(function() {
        userMenu._init();
    });

})($);