onClick Menu w/ Meny JS

Question

I'm trying to figure out a way to have this Meny JS menu open onClick rather than the mouseover. I've tried commenting out the mouseover function in the js to allow for the mousedown and mouseup to take precedence, but it just kills the functionality completely. Would be VERY appreciative of any help/insight y'all can provide.

JSFiddle

MenyJS

I'm sure the solution lives in this section - see below:

        /**
         * The contents element which gets pushed aside while
         * Meny is open.
         */
        function setupContents() {
            // Shorthand
            var style = dom.contents.style;

            originalStyles.contents = style.cssText;

            if( supports3DTransforms ) {
                style[ Meny.prefix( 'transform' ) ] = contentsTransformClosed;
                style[ Meny.prefix( 'transformOrigin' ) ] = contentsTransformOrigin;
                style[ Meny.prefix( 'transition' ) ] = 'all ' + config.transitionDuration +' '+ config.transitionEasing;
            }
            else {
                style.position = style.position.match( /relative|absolute|fixed/gi ) ? style.position : 'relative';
                Meny.extend( style, contentsStyleClosed );
            }
        }

        /**
         * Attaches all input event listeners.
         */
        function bindEvents() {

            if( 'ontouchstart' in window ) {
                if( config.touch ) {
                    Meny.bindEvent( document, 'touchstart', onTouchStart );
                    Meny.bindEvent( document, 'touchend', onTouchEnd );
                }
                else {
                    Meny.unbindEvent( document, 'touchstart', onTouchStart );
                    Meny.unbindEvent( document, 'touchend', onTouchEnd );
                }
            }

            if( config.mouse ) {
                Meny.bindEvent( document, 'mousedown', onMouseDown );
                Meny.bindEvent( document, 'mouseup', onMouseUp );
                Meny.bindEvent( document, 'mousemove', onMouseMove );
            }
            else {
                Meny.unbindEvent( document, 'mousedown', onMouseDown );
                Meny.unbindEvent( document, 'mouseup', onMouseUp );
                Meny.unbindEvent( document, 'mousemove', onMouseMove );
            }
        }

        /**
         * Expands the menu.
         */
        function open() {
            if( !isOpen ) {
                isOpen = true;

                Meny.addClass( dom.wrapper, 'meny-active' );

                dom.cover.style.height = dom.contents.scrollHeight + 'px';
                dom.cover.style.visibility = 'visible';

                // Use transforms and transitions if available...
                if( supports3DTransforms ) {
                    // 'webkitAnimationEnd oanimationend msAnimationEnd animationend transitionend'
                    Meny.bindEventOnce( dom.wrapper, 'transitionend', function() {
                        Meny.dispatchEvent( dom.menu, 'opened' );
                    } );

                    dom.cover.style.opacity = 1;

                    dom.contents.style[ Meny.prefix( 'transform' ) ] = contentsTransformOpened;
                    dom.menu.style[ Meny.prefix( 'transform' ) ] = menuTransformOpened;
                }
                // ...fall back on JS animation
                else {
                    menuAnimation && menuAnimation.stop();
                    menuAnimation = Meny.animate( dom.menu, menuStyleOpened, 500 );
                    contentsAnimation && contentsAnimation.stop();
                    contentsAnimation = Meny.animate( dom.contents, contentsStyleOpened, 500 );
                    coverAnimation && coverAnimation.stop();
                    coverAnimation = Meny.animate( dom.cover, { opacity: 1 }, 500 );
                }

                Meny.dispatchEvent( dom.menu, 'open' );
            }
        }

        /**
         * Collapses the menu.
         */
        function close() {
            if( isOpen ) {
                isOpen = false;

                Meny.removeClass( dom.wrapper, 'meny-active' );

                // Use transforms and transitions if available...
                if( supports3DTransforms ) {
                    // 'webkitAnimationEnd oanimationend msAnimationEnd animationend transitionend'
                    Meny.bindEventOnce( dom.wrapper, 'transitionend', function() {
                        Meny.dispatchEvent( dom.menu, 'closed' );
                    } );

                    dom.cover.style.visibility = 'hidden';
                    dom.cover.style.opacity = 0;

                    dom.contents.style[ Meny.prefix( 'transform' ) ] = contentsTransformClosed;
                    dom.menu.style[ Meny.prefix( 'transform' ) ] = menuTransformClosed;
                }
                // ...fall back on JS animation
                else {
                    menuAnimation && menuAnimation.stop();
                    menuAnimation = Meny.animate( dom.menu, menuStyleClosed, 500 );
                    contentsAnimation && contentsAnimation.stop();
                    contentsAnimation = Meny.animate( dom.contents, contentsStyleClosed, 500 );
                    coverAnimation && coverAnimation.stop();
                    coverAnimation = Meny.animate( dom.cover, { opacity: 0 }, 500, function() {
                        dom.cover.style.visibility = 'hidden';
                        Meny.dispatchEvent( dom.menu, 'closed' );
                    } );
                }
                Meny.dispatchEvent( dom.menu, 'close' );
            }
        }

        /**
         * Unbinds Meny and resets the DOM to the state it
         * was at before Meny was initialized.
         */
        function destroy() {
            dom.wrapper.style.cssText = originalStyles.wrapper
            dom.menu.style.cssText = originalStyles.menu;
            dom.contents.style.cssText = originalStyles.contents;

            if( dom.cover && dom.cover.parentNode ) {
                dom.cover.parentNode.removeChild( dom.cover );
            }

            Meny.unbindEvent( document, 'touchstart', onTouchStart );
            Meny.unbindEvent( document, 'touchend', onTouchEnd );
            Meny.unbindEvent( document, 'mousedown', onMouseDown );
            Meny.unbindEvent( document, 'mouseup', onMouseUp );
            Meny.unbindEvent( document, 'mousemove', onMouseMove );

            for( var i in addedEventListeners ) {
                this.removeEventListener( addedEventListeners[i][0], addedEventListeners[i][3] );
            }

            addedEventListeners = [];
        }


        /// INPUT: /////////////////////////////////

        function onMouseDown( event ) {
            isMouseDown = true;
        }

        function onMouseMove( event ) {
            // Prevent opening/closing when mouse is down since
            // the user may be selecting text
            if( !isMouseDown ) {
                var x = event.clientX - indentX,
                    y = event.clientY - indentY;

                switch( config.position ) {
                    case POSITION_T:
                        if( y > config.height ) {
                            close();
                        }
                        else if( y < config.threshold ) {
                            open();
                        }
                        break;

                    case POSITION_R:
                        var w = dom.wrapper.offsetWidth;
                        if( x < w - config.width ) {
                            close();
                        }
                        else if( x > w - config.threshold ) {
                            open();
                        }
                        break;

                    case POSITION_B:
                        var h = dom.wrapper.offsetHeight;
                        if( y < h - config.height ) {
                            close();
                        }
                        else if( y > h - config.threshold ) {
                            open();
                        }
                        break;

                    case POSITION_L:
                        if( x > config.width ) {
                            close();
                        }
                        else if( x < config.threshold ) {
                            open();
                        }
                        break;
                }
            }
        }

        function onMouseUp( event ) {
            isMouseDown = false;
        }

Answer 1

A solution would be to set the threshold parameter to 0, set mouse to false, then use a jQuery click handler to run meny.open():

var meny = Meny.create({
    ...
    threshold: 0,
    mouse: false
});

$(".meny-arrow").click(function(){
    meny.open();
});

$(".meny").click(function(){
    meny.close();
});

$(".contents").click(function(){
    meny.close();
});

Example.

Note: This didn't work for me until I included the Meny.js code inline with everything. When I linked to it externally, it did not work. I would recommend, therefore, to modify the threshold and mouse parameters directly within the script instead of overriding then with the create function.