Push Menu jQuery

readme.md

Example use code

jQuery and plugin jQuery UI Required! AND a beautiful css lol

// Class, div or name element
$('element-menu-here').FleetMenu({
  toggle:'.navbar-toggle' // Button to open menu
});

jquery.fleetmenu.js

/*!
 * jQuery FleetMenu Plugin v1.0.0
 * https://www.soufleet.com
 *
 * Copyright 2016, Lenivene Bezerra
 * Released under the MIT license
 */
(function (factory) {
	if (typeof define === 'function' && define.amd) {
		// AMD (Register as an anonymous module)
		define(['jquery'], factory);
	}
	else if( typeof exports === 'object' ){
		// Node/CommonJS
		module.exports = factory(require('jquery'));
	}
	else{
		// Browser globals
		factory(jQuery);
	}
}(function ($) {
	if( !$.ui || typeof $.ui == 'undefined' ){
		$.fn.FleetMenu = function(){};
		throw new Error( 'jQuery and plugin jQuery UI Required!' );
		return;
	}

	if (("ontouchend" in document)){
		var mousePrototype = $.ui.mouse.prototype, _mouseInit = mousePrototype._mouseInit, _mouseDestroy = mousePrototype._mouseDestroy, touchHandled;

		function simulateMouseEvent( event, simulatedType ) {
			if (event.originalEvent.touches.length > 1) {
				return;
			}

			event.preventDefault();

			var touchscreen = event.originalEvent.changedTouches[0],
				simulatedEvent = document.createEvent( "MouseEvents" );

			simulatedEvent.initMouseEvent( simulatedType, true, true, window, 1, touchscreen.screenX, touchscreen.screenY, touchscreen.clientX, touchscreen.clientY, false, false, false, false, 0, null );
			event.target.dispatchEvent( simulatedEvent );
		}

		mousePrototype._touchStart = function(event) {
			var self = this;
			if (touchHandled || !self._mouseCapture( event.originalEvent.changedTouches[0] ) ){
				return;
			}

			touchHandled = true;
			self._touchMoved = false;

			simulateMouseEvent( event, "mouseover" );
			simulateMouseEvent( event, "mousemove" );
			simulateMouseEvent( event, "mousedown" );
		};

		mousePrototype._touchMove = function(event) {
			if( ! touchHandled ){
				return;
			}
			this._touchMoved = true;
			simulateMouseEvent( event, "mousemove" );
		};

		mousePrototype._touchEnd = function( event ){
			if( ! touchHandled ){
				return;
			}
			simulateMouseEvent( event, "mouseup" );
			simulateMouseEvent( event, "mouseout" );
			if( ! this._touchMoved ){
				simulateMouseEvent( event, "click" );
			}
			touchHandled = false;
		};

		mousePrototype._mouseInit = function() {
			var self = this;
			self.element.bind({
				touchstart : $.proxy( self, "_touchStart" ),
				touchmove  : $.proxy( self, "_touchMove" ),
				touchend   : $.proxy( self, "_touchEnd" )
			});
			_mouseInit.call( self );
		};

		mousePrototype._mouseDestroy = function() {
			var self = this;
			self.element.unbind({
				touchstart : $.proxy( self, "_touchStart" ),
				touchmove  : $.proxy( self, "_touchMove" ),
				touchend   : $.proxy( self, "_touchEnd" )
			});
			_mouseDestroy.call( self );
		};
	}

	$.fn.FleetMenu = function( options ) {
		var settings = $.extend( {
			toggle  : '.navbar-toggle',
			element : this
		}, options );

		var navPosition = 0;
		$( settings.element ).draggable({
			axis: 'x',
			scroll: false,
			start: function( event, ui ) {
				navPosition = ui.position.left;
			},
			drag: function( event, ui ) {
				var wheight = $(window).height(),
					wwidth = $(window).width(),
					width = $(this).width();

				if( ui.position.left < navPosition && ui.position.left <= ( -( ( width / 100 ) * 35 ) ) ){
					if( wwidth >= wheight ){
						ui.position.left = -( wwidth );
					}
					else{
						ui.position.left = -( wheight );
					}
				}

				if( ui.position.left > navPosition ){
					ui.position.left = navPosition;
				}

				if( ui.position.left < -( width ) ){
					if( wwidth >= wheight ){
						ui.position.left = -( wwidth );
					}
					else{
						ui.position.left = -( wheight );
					}
				}
			}
		});

		$( settings.toggle ).on( "click", function(){
			var element = $(this).data( 'target' );
			$( settings.element ).css( {
				transform : "translate(0, 0)",
				left: '0px'
			});
		});
	}
}));

jquery.fleetmenu.min.js

/** jQuery FleetMenu Plugin v1.0.0 | https://www.soufleet.com | Copyright 2016, Lenivene Bezerra | Released under the MIT license **/
!function(a){"function"==typeof define&&define.amd?define(["jquery"],a):"object"==typeof exports?module.exports=a(require("jquery")):a(jQuery)}(function(a){function f(a,b){if(!(a.originalEvent.touches.length>1)){var c=a.originalEvent.changedTouches[0]||a.originalEvent.touches[0],d=document.createEvent("MouseEvents");d.initMouseEvent(b,!0,!0,window,1,c.screenX,c.screenY,c.clientX,c.clientY,!1,!1,!1,!1,0,null),a.target.dispatchEvent(d),a.preventDefault()}}if(!a.ui||"undefined"==typeof a.ui)throw a.fn.FleetMenu=function(){},new Error("jQuery and plugin jQuery UI Required!");if("ontouchend"in document){if(a.support.touch="ontouchend"in document,!a.support.touch)return;var e,b=a.ui.mouse.prototype,c=b._mouseInit,d=b._mouseDestroy;b._touchStart=function(a){var b=this;a.preventDefault(),!e&&b._mouseCapture(a.originalEvent.changedTouches[0])&&(e=!0,b._touchMoved=!1,f(a,"mouseover"),f(a,"mousemove"),f(a,"mousedown"))},b._touchMove=function(a){e&&(this._touchMoved=!0,f(a,"mousemove"))},b._touchEnd=function(a){if(e)return f(a,"mouseup"),f(a,"mouseout"),this._touchMoved||f(a,"click"),e=!1,!0},b._mouseInit=function(){var b=this;b.element.bind({touchstart:a.proxy(b,"_touchStart"),touchmove:a.proxy(b,"_touchMove"),touchend:a.proxy(b,"_touchEnd")}),c.call(b)},b._mouseDestroy=function(){var b=this;b.element.unbind({touchstart:a.proxy(b,"_touchStart"),touchmove:a.proxy(b,"_touchMove"),touchend:a.proxy(b,"_touchEnd")}),d.call(b)}}a.fn.FleetMenu=function(b){var c=a.extend({toggle:".navbar-toggle",element:this},b),d=0;a(c.element).draggable({axis:"x",scroll:!1,start:function(a,b){d=b.position.left},drag:function(b,c){var e=a(window).height(),f=a(window).width(),g=a(this).width();c.position.left<d&&c.position.left<=-(g/100*35)&&(f>=e?c.position.left=-f:c.position.left=-e),c.position.left>d&&(c.position.left=d),c.position.left<-g&&(f>=e?c.position.left=-f:c.position.left=-e)}}),a(c.toggle).on("click",function(){a(this).data("target");a(c.element).css({transform:"translate(0, 0)",left:"0px"})})}});