tap-support (closes #1), update readme

README.md

@@ -1,10 +1,20 @@
 # Meny
 
-A UI experiment with a 3D fold-in menu. Requires a browser with support for CSS 3D transforms. Also works in Mobile Safari.
+A three dimensional and space effecient menu concept. Requires a browser with support for CSS 3D transforms. Works very well in Mobile Safari.
 
 [Check out the demo page](http://lab.hakim.se/meny/).
 
-# License
+## History
+
+#### 0.2
+- Cleaned up CSS
+- Fix bug where original events for taps on anchors were blocked
+- It's now possible to reach the meny via tapping as well as swiping
+
+#### 0.1
+- Initial release
+
+## License
 
 MIT licensed
 

css/meny.css

@@ -1,5 +1,5 @@
 /*!
- * meny 0.1
+ * meny 0.2
  * http://lab.hakim.se/meny
  * MIT licensed
  *

index.html

@@ -50,10 +50,10 @@ <h1>Meny</h1>
 					Pass in a URL to test it with any page, like so: <a href="http://lab.hakim.se/meny/?http://hakim.se">lab.hakim.se/meny/?http://hakim.se.</a>
 				</p>
 				<p>
-					This was created using CSS 3D transforms. JavaScript is used to track mouse/touch movement.
+					CSS 3D transforms are used for the transition effect and JavaScript is used to track mouse/touch movement.
 				</p>
 				<p>
-					It's called Meny with a <em>y</em> since that's how it's spelled in swedish.
+					The name, <em>Meny</em>, is swedish.
 				</p>
 				<small>
 					Created by <a href="http://twitter.com/hakimel">@hakimel</a> / <a href="http://hakim.se/">http://hakim.se</a>

js/meny.js

@@ -1,5 +1,5 @@
 /*!
- * meny 0.1
+ * meny 0.2
  * http://lab.hakim.se/meny
  * MIT licensed
  *
@@ -11,49 +11,77 @@
 
 	var activateX = 40,
 		deactivateX = meny.offsetWidth || 300,
-		startTouchX = 0,
-		isActive = false;
+		touchStartX = null,
+		touchMoveX = null,
+		isActive = false,
+		isMouseDown = false;
 
+	document.addEventListener( 'mousedown', onMouseDown, false );
+	document.addEventListener( 'mouseup', onMouseUp, false );
 	document.addEventListener( 'mousemove', onMouseMove, false );
 	document.addEventListener( 'touchstart', onTouchStart, false );
+	document.addEventListener( 'touchend', onTouchEnd, false );
+
+	function onMouseDown( event ) {
+		isMouseDown = true;
+	}
 
 	function onMouseMove( event ) {
-		var x = event.clientX,
-			y = event.clientY;
+		// Prevent opening/closing when mouse is down since 
+		// the user may be selecting text
+		if( !isMouseDown ) {
+			var x = event.clientX;
 
-		if( isActive && x > deactivateX ) {
-			deactivate();
-		}
-		else if( !isActive && x < activateX ) {
-			activate();
+			if( x > deactivateX ) {
+				deactivate();
+			}
+			else if( x < activateX ) {
+				activate();
+			}
 		}
 	}
 
+	function onMouseUp( event ) {
+		isMouseDown = false;
+	}
+
 	function onTouchStart( event ) {
-		lastTouchX = event.touches[0].clientX;
+		touchStartX = event.touches[0].clientX;
+		touchMoveX = null;
 
-		if( isActive || lastTouchX < activateX ) {
+		if( isActive || touchStartX < activateX ) {
 			document.addEventListener( 'touchmove', onTouchMove, false );
-			document.addEventListener( 'touchend', onTouchEnd, false );
 		}
 	}
 
 	function onTouchMove( event ) {
-		var x = event.touches[0].clientX;
+		touchMoveX = event.touches[0].clientX;
 
-		if( isActive && x < lastTouchX - activateX ) {
+		if( isActive && touchMoveX < touchStartX - activateX ) {
 			deactivate();
 			event.preventDefault();
 		}
-		else if( !isActive && lastTouchX < activateX && x > lastTouchX + activateX ) {
+		else if( touchStartX < activateX && touchMoveX > touchStartX + activateX ) {
 			activate();
 			event.preventDefault();
 		}
 	}
 
 	function onTouchEnd( event ) {
 		document.addEventListener( 'touchmove', onTouchMove, false );
-		document.addEventListener( 'touchend', onTouchEnd, false );
+
+		// If there was no movement this was a tap
+		if( touchMoveX === null ) {
+			// Hide the menu when tapping on the content area
+			if( touchStartX > deactivateX ) {
+				deactivate();
+			}
+			// Show the meny when tapping on the left edge
+			else if( touchStartX < activateX * 2 ) {
+				activate();
+			}
+		}
+
 	}
 
 	function activate() {