Example for mobile menu

example-mobile-menu.js

$(document).ready(function () {

    var MenuApp = (function () {

        var Menu = function (options) {
            this.el = options.el;
            this.trigger = options.trigger;
        };

        Menu.prototype.init = function () {
            this.addEventListeners()
        };

        Menu.prototype.addEventListeners = function () {
            $(this.trigger).on('click.menu', $.proxy(this.toggle, this));
            $(document).on('click.menu', $.proxy(this.hideByDocument, this));
        };

        Menu.prototype.toggle = function () {
            $(this.el).toggle();
        };

        Menu.prototype.show = function () {
            $(this.el).show();
        };

        Menu.prototype.hide = function () {
            $(this.el).hide();
        };

        Menu.prototype.checkElement = function (target, el) {
            return !$(el).is(target) && $(el).has(target).length === 0
        };

        Menu.prototype.hideByDocument = function (e) {

            if(this.checkElement(e.target, this.trigger) && this.checkElement(e.target, this.el)) {
                this.hide();
            }
        };

        return Menu;

    })();

    var menuApp = new MenuApp({
        el: '#menu',
        trigger: '#menu-btn'
    });

    menuApp.init();

});