Mobile Menu Script (jQuery)

mobileMenu

var mobileMenu = function() {
    return {
        $: null,
        options: null,
        openClass: 'open',
        doAfter: function(){
            if(typeof this.options.afterClick === 'function'){
                this.options.afterClick();
            }
        },
        isClicked: function(el){
            return $(el).closest(this.$).length;
        },
        isOpen: function(){
            return this.$.hasClass(this.openClass);
        },
        closeMenu: function(){
            this.$.removeClass((function(t){
                t.doAfter();
                return t.openClass;
            })(this));
        },
        openMenu: function(){
            this.$.addClass((function(t){
                t.doAfter();
                return t.openClass;
            })(this));
        },
        addEvents: function(){
            $(document).on({
                mouseup: (function(t){
                    return function(e) {
                        var isClicked = t.isClicked(e.target);
                        var isOpen = t.isOpen();

                        if(isClicked){
                            if(!isOpen){
                                t.openMenu();
                            } else {
                                t.closeMenu();
                            }
                        } else {
                            if(isOpen){
                                t.closeMenu();
                            }
                        }
                    }
                })(this)
            });
        },
        init: function(el, opts){
            this.$ = el;

            $.extend({
                handle: '.mobile-handle',
                menu: '.mobile-menu',
                afterClick: null
            }, this.options = opts);

            this.addEvents();

            return this;
        }
    }
}


// Usage
var mob1 = new mobileMenu().init($('.topmenu'), {
    menu: '.mobile-menu',
    handle: '.mobile-handle',
    afterClick: function(){}
});


// Example
// <div class="topmenu">
//     <div class="mobile-handle"></div>
//     <div class="mobile-menu">
//         <ul class="clearfix">
//             <?php echo $topmenu; ?>
//         </ul>
//     </div>
// </div>