From 9b87d20c4b873dac0d03bc724620800c5b170827 Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Tue, 11 Sep 2012 01:31:54 -0400 Subject: [PATCH] rewrite demo text, add minified script --- css/demo.css | 20 +++++++++++++++----- index.html | 33 ++++++++++++++++++++++++--------- js/meny.js | 19 ++++++++++++++++--- js/meny.min.js | 40 ++++++++++++++++++++++++++++++++++++++++ 4 files changed, 95 insertions(+), 17 deletions(-) create mode 100644 js/meny.min.js diff --git a/css/demo.css b/css/demo.css index 3807cfa..5a5f8bf 100644 --- a/css/demo.css +++ b/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 { diff --git a/index.html b/index.html index d235af2..f59e3a2 100644 --- a/index.html +++ b/index.html @@ -40,17 +40,21 @@

More Experiments

Meny

- A three dimensional and space efficient menu concept. + A three dimensional and space efficient menu.

- Move your mouse to the left edge of this page — or swipe in from the left edge if you're on a touch device — to expand the menu. - Pass in a URL to test it with any page, like so: lab.hakim.se/meny/?http://hakim.se. + Move your mouse towards the arrow — or swipe in from the arrow if you're on a touch device — to open. + Test it with any page by appending a URL, like so: lab.hakim.se/meny/?u=http://hakim.se.

- There's a special folding variant of the transition. Activate the #fold or reset. + Meny can be positioned on any side of the screen:
+ top + - right + - bottom + - left

- CSS 3D transforms are used for the transition effect and JavaScript is used to track mouse/touch movement. + Instructions and download at github.com/hakimel/meny.

The name, Meny, is swedish. @@ -69,14 +73,23 @@

Meny

Fork me on GitHub - + diff --git a/js/meny.js b/js/meny.js index 44fc9e7..4b4adfe 100644 --- a/js/meny.js +++ b/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; } }; \ No newline at end of file diff --git a/js/meny.min.js b/js/meny.min.js new file mode 100644 index 0000000..b693423 --- /dev/null +++ b/js/meny.min.js @@ -0,0 +1,40 @@ +/*! + * meny 0.9 + * http://lab.hakim.se/meny + * MIT licensed + * + * Created by Hakim El Hattab, @hakimel, http://hakim.se + */ +var Meny={create:function(a){return(function(){if(!a||!a.menuElement||!a.contentsElement){throw"You need to specify which menu and contents elements to use."; +return false;}if(a.menuElement.parentNode!==a.contentsElement.parentNode){throw"The menu and contents elements must have the same parent.";return false; +}var A=["Webkit","Moz","O","ms"],G="top",h="right",w="bottom",q="left";var E="WebkitPerspective" in document.body.style||"MozPerspective" in document.body.style||"msPerspective" in document.body.style||"OPerspective" in document.body.style||"perspective" in document.body.style; +var C={width:300,height:300,position:q,activateThreshold:40};var c={menuElement:a.menuElement,contentsElement:a.contentsElement,wrapper:a.menuElement.parentNode,cover:null}; +var z=c.wrapper.offsetLeft,y=c.wrapper.offsetTop,s=null,p=null,I=false,m=false;var x,i,F,O,v;k(C,a);if(E){g();e();u();B();M();N();}else{c.menuElement.style.display="block"; +console.log("Your browser doesn't support 3D transforms, fallback coming soon.");return false;}function g(){F="";O="";switch(C.position){case G:x="50% 0"; +i="rotateX( 30deg ) translateY( -100% ) translateY( 8px )";v="translateY( "+C.height+"px ) rotateX( -15deg )";break;case h:x="100% 50%";i="rotateY( 30deg ) translateX( 100% ) translateX( -8px )"; +v="translateX( -"+C.width+"px ) rotateY( -15deg )";break;case w:x="50% 100%";i="rotateX( -30deg ) translateY( 100% ) translateY( -8px )";v="translateY( -"+C.height+"px ) rotateX( 15deg )"; +break;default:x="0 50%";i="rotateY( -30deg ) translateX( -100% ) translateX( 8px )";v="translateX( "+C.width+"px ) rotateY( 15deg )";break;}}function e(){t(c.wrapper,"meny-"+C.position); +c.wrapper.style[D("perspective")]="800px";c.wrapper.style[D("perspectiveOrigin")]=x;}function u(){c.cover=document.createElement("div");c.cover.style.display="block"; +c.cover.style.position="absolute";c.cover.style.width="100%";c.cover.style.height="100%";c.cover.style.left=0;c.cover.style.top=0;c.cover.style.visibility="hidden"; +c.cover.style.zIndex=1000;c.cover.style.background="rgba( 0, 0, 0, 0.4 )";c.cover.style.opacity=0;c.cover.style[D("transition")]="all .5s ease";c.contentsElement.appendChild(c.cover); +}function B(){switch(C.position){case G:c.menuElement.style.width="100%";c.menuElement.style.height=C.height+"px";break;case h:c.menuElement.style.right="0"; +c.menuElement.style.width=C.width+"px";c.menuElement.style.height="100%";break;case w:c.menuElement.style.bottom="0";c.menuElement.style.width="100%";c.menuElement.style.height=C.height+"px"; +break;case q:c.menuElement.style.width=C.width+"px";c.menuElement.style.height="100%";break;}c.menuElement.style.display="block";c.menuElement.style.position="fixed"; +c.menuElement.style.zIndex=1;c.menuElement.style[D("transform")]=i;c.menuElement.style[D("transformOrigin")]=x;c.menuElement.style[D("transition")]="all .5s ease"; +}function M(){c.contentsElement.style[D("transform")]=O;c.contentsElement.style[D("transformOrigin")]=x;c.contentsElement.style[D("transition")]="all .5s ease"; +}function N(){document.addEventListener("mousedown",J,false);document.addEventListener("mouseup",Q,false);document.addEventListener("mousemove",b,false); +document.addEventListener("touchstart",K,false);document.addEventListener("touchend",H,false);}function l(){if(!I){I=true;t(c.wrapper,"meny-active");c.cover.style.height=c.contentsElement.scrollHeight+"px"; +c.cover.style.visibility="visible";c.cover.style.opacity=1;c.contentsElement.style[D("transform")]=v;c.menuElement.style[D("transform")]=F;}}function d(){if(I){I=false; +n(c.wrapper,"meny-active");c.cover.style.visibility="hidden";c.cover.style.opacity=0;c.contentsElement.style[D("transform")]=O;c.menuElement.style[D("transform")]=i; +}}function k(S,R){for(var T in R){S[T]=R[T];}}function D(V,U){var S=V.slice(0,1).toUpperCase()+V.slice(1);for(var T=0,R=A.length;TC.height){d();}else{if(VS-C.activateThreshold){l();}}break;case w:var T=c.wrapper.offsetHeight;if(VT-C.activateThreshold){l(); +}}break;case q:if(R>C.width){d();}else{if(Rs+C.activateThreshold){R=o;}else{if(touchMoveYtouchStartY+C.activateThreshold){R=f; +}if(R&&R()){S.preventDefault();}}function H(R){document.removeEventListener("touchmove",L,false);if(p===null&&touchMoveY===null){j();}}function j(){}function o(){if(C.position===h&&I){d(); +return true;}else{if(C.position===q&&!I){l();return true;}}}function P(){if(C.position===h&&!I){l();return true;}else{if(C.position===q&&I){d();return true; +}}}function f(){if(C.position===w&&I){d();return true;}else{if(C.position===G&&!I){l();return true;}}}function r(){if(C.position===w&&!I){l();return true; +}else{if(C.position===G&&I){d();return true;}}}return{activate:l,deactivate:d,isActive:function(){return I;}};})();},getQuery:function(){var a={};location.search.replace(/[A-Z0-9]+?=([\w|:|\/\.]*)/gi,function(b){a[b.split("=").shift()]=b.split("=").pop(); +});return a;}}; \ No newline at end of file