rewrite demo text, add minified script

css/demo.css

@@ -1,4 +1,14 @@
 
+/**
+ * The CSS in this file is for styling the demo page, 
+ * Meny's critical styles (such as transforms) are applied
+ * via JavaScript.
+ *
+ * See the documentation here: https://github.com/hakimel/meny#meny
+ *
+ * @author Hakim El Hattab | http://hakim.se
+ */
+
 * {
 	margin: 0;
 	padding: 0;
@@ -41,7 +51,7 @@ h2 {
 
 .meny {
 	display: none;
-	padding: 10px;
+	padding: 20px;
 	overflow: auto;
 	background: #333;
 	color: #eee;
@@ -84,25 +94,25 @@ h2 {
 	.meny-left .meny-arrow {
 		left: 14px;
 		top: 50%;
-		margin-top: -8px;
+		margin-top: -16px;
 		border-left: 16px solid #333;
 	}
 	.meny-right .meny-arrow {
 		right: 14px;
 		top: 50%;
-		margin-top: -8px;
+		margin-top: -16px;
 		border-right: 16px solid #333;
 	}
 	.meny-top .meny-arrow {
 		left: 50%;
 		top: 14px;
-		margin-left: -8px;
+		margin-left: -16px;
 		border-top: 16px solid #333;
 	}
 	.meny-bottom .meny-arrow {
 		left: 50%;
 		bottom: 14px;
-		margin-left: -8px;
+		margin-left: -16px;
 		border-bottom: 16px solid #333;
 	}
 	.meny-active .meny-arrow {

index.html

@@ -40,17 +40,21 @@ <h2>More Experiments</h2>
 			<article>
 				<h1>Meny</h1>
 				<p>
-					A three dimensional and space efficient menu concept.
+					A three dimensional and space efficient menu.
 				</p>
 				<p>
-					Move your mouse to the left edge of this page &mdash; or swipe in from the left edge if you're on a touch device &mdash; to expand the menu.
-					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> 
+					Move your mouse towards the arrow &mdash; or swipe in from the arrow if you're on a touch device &mdash; to open.
+					Test it with any page by appending a URL, like so: <a href="http://lab.hakim.se/meny/?u=http://hakim.se">lab.hakim.se/meny/?u=http://hakim.se.</a> 
 				</p>
 				<p>
-					There's a special folding variant of the transition. <a href="#fold">Activate the #fold</a> or <a href="#">reset</a>.
+					Meny can be positioned on any side of the screen: <br>
+					 <a href="http://lab.hakim.se/meny/?p=top">top</a> 
+					 - <a href="http://lab.hakim.se/meny/?p=right">right</a> 
+					 - <a href="http://lab.hakim.se/meny/?p=bottom">bottom</a>
+					 - <a href="http://lab.hakim.se/meny/?p=left">left</a> 
 				</p>
 				<p>
-					CSS 3D transforms are used for the transition effect and JavaScript is used to track mouse/touch movement.
+					Instructions and download at <a href="http://github.com/hakimel/meny">github.com/hakimel/meny</a>.
 				</p>
 				<p>
 					The name, <em>Meny</em>, is swedish.
@@ -69,27 +73,38 @@ <h1>Meny</h1>
 			<a href="https://github.com/hakimel/meny"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://a248.e.akamai.net/camo.github.com/e6bef7a091f5f3138b8cd40bc3e114258dd68ddf/687474703a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67" alt="Fork me on GitHub"></a>
 		</div>
 
-		<script src="js/meny.js"></script>
+		<script src="js/meny.min.js"></script>
 		<script>
 			// Create an instance of Meny
 			var meny = Meny.create({
+				// The element that will be animated in from off screen
 				menuElement: document.querySelector( '.meny' ),
+
+				// The contents that gets pushed aside while Meny is active
 				contentsElement: document.querySelector( '.contents' ),
-				position: 'bottom',
+
+				// The alignment of the menu (top/right/bottom/left)
+				position: Meny.getQuery().p || 'left',
+
+				// The height of the menu (when using top/bottom position)
 				height: 200,
+
+				// The width of the menu (when using left/right position)
 				width: 260
 			});
 
 			// API Methods:
 			// meny.activate();
 			// meny.deactivate();
 			// meny.isActive();
+
+
 
 			// Embed an iframe if a URL is passed in
-			if( window.location.search.length && window.location.search.match( /^\?(http|www)/gi ) ) {
+			if( Meny.getQuery().u && Meny.getQuery().u.match( /^http/gi ) ) {
 				var contents = document.querySelector( '.contents' );
 				contents.style.padding = '0px';
-				contents.innerHTML = '<div class="cover"></div><iframe src="'+ window.location.search.slice( 1 ) +'" style="width: 100%; height: 100%; border: 0; position: absolute;"></iframe>';
+				contents.innerHTML = '<div class="cover"></div><iframe src="'+ Meny.getQuery().u +'" style="width: 100%; height: 100%; border: 0; position: absolute;"></iframe>';
 			}
 		</script>
 

js/meny.js

@@ -3,9 +3,10 @@
  * http://lab.hakim.se/meny
  * MIT licensed
  *
- * Created by Hakim El Hattab, http://hakim.se
+ * Created by Hakim El Hattab, @hakimel, http://hakim.se
  */
 var Meny = {
+	// Creates a new instance of Meny
 	create: function( options ) {
 		return (function(){
 
@@ -74,6 +75,7 @@ var Meny = {
 				bindEvents();
 			}
 			else {
+				// JS animation fallback will be added soon
 				dom.menuElement.style.display = 'block';
 				console.log( 'Your browser doesn\'t support 3D transforms, fallback coming soon.' );
 				return false;
@@ -208,8 +210,8 @@ var Meny = {
 					dom.cover.style.visibility = 'visible';
 					dom.cover.style.opacity = 1;
 
-					dom.menuElement.style[ prefix( 'transform' ) ] = menuTransformOpened;
 					dom.contentsElement.style[ prefix( 'transform' ) ] = contentsTransformOpened;
+					dom.menuElement.style[ prefix( 'transform' ) ] = menuTransformOpened;
 				}
 			}
 
@@ -222,8 +224,8 @@ var Meny = {
 					dom.cover.style.visibility = 'hidden';
 					dom.cover.style.opacity = 0;
 
-					dom.menuElement.style[ prefix( 'transform' ) ] = menuTransformClosed;
 					dom.contentsElement.style[ prefix( 'transform' ) ] = contentsTransformClosed;
+					dom.menuElement.style[ prefix( 'transform' ) ] = menuTransformClosed;
 				}
 			}
 
@@ -429,5 +431,16 @@ var Meny = {
 			};
 
 		})();
+	},
+
+	// Helper method, retrieves query string as a key/value hash
+	getQuery: function() {
+		var query = {};
+
+		location.search.replace( /[A-Z0-9]+?=([\w|:|\/\.]*)/gi, function(a) {
+			query[ a.split( '=' ).shift() ] = a.split( '=' ).pop();
+		} );
+
+		return query;
 	}
 };