Permalink
Browse files

no-transform fallback mode

  • Loading branch information...
1 parent 65e4e1d commit 41a1f3b25f2478200c2d78f2aba81dcc67478d7b @hakimel hakimel committed Aug 7, 2012
Showing with 50 additions and 23 deletions.
  1. +3 −0 README.md
  2. +29 −1 css/meny.css
  3. +0 −19 index.html
  4. +18 −3 js/meny.js
View
@@ -6,6 +6,9 @@ A three dimensional and space effecient menu concept. Requires a browser with su
## History
+#### 0.3
+- Fallback mode that doesn't rely on transforms
+
#### 0.2
- Cleaned up CSS
- Fix bug where original events for taps on anchors were blocked
View
@@ -1,5 +1,5 @@
/*!
- * meny 0.2
+ * meny 0.3
* http://lab.hakim.se/meny
* MIT licensed
*
@@ -161,6 +161,7 @@ body {
top: 45%;
left: 12px;
z-index: 2;
+ font-family: sans-serif;
font-size: 20px;
color: #333;
@@ -176,6 +177,33 @@ body {
}
+/**
+ * Fallback for browsers that don't support transforms.
+ */
+
+.meny-no-transform .meny,
+.meny-no-transform .meny-contents {
+ -webkit-transition: left .4s ease;
+ -moz-transition: left .4s ease;
+ -ms-transition: left .4s ease;
+ -o-transition: left .4s ease;
+ transition: left .4s ease;
+}
+
+.meny-no-transform .meny {
+ left: -300px;
+}
+ .meny-no-transform.meny-active .meny {
+ left: 0px;
+ }
+
+.meny-no-transform .meny-contents {
+ position: absolute;
+}
+ .meny-no-transform.meny-active .meny-contents {
+ left: 300px;
+ }
+
/**
* Styles that are more or less specific to the demo page:
View
@@ -60,12 +60,6 @@
</small>
</article>
- <div class="sharing">
- <a href="http://twitter.com/share" class="twitter-share-button" data-text="Meny - a three dimensional fold-in menu concept by @hakimel" data-url="http://lab.hakim.se/meny" data-count="small" data-related="hakimel"></a>
-
- <iframe id="facebook-button" src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Flab.hakim.se%2Fmeny%2F&layout=button_count&show_faces=false&width=83&action=like&font=arial&colorscheme=light&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:85px; height:24px; position: relative; top: 4px;" allowTransparency="true"></iframe>
- </div>
-
<a class="fork-reveal" 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>
@@ -79,19 +73,6 @@
}
</script>
-
- <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
-
- <script>
- var _gaq = [['_setAccount', 'UA-15240703-1'], ['_trackPageview']];
- (function(d, t) {
- var g = d.createElement(t),
- s = d.getElementsByTagName(t)[0];
- g.async = true;
- g.src = ('https:' == location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
- s.parentNode.insertBefore(g, s);
- })(document, 'script');
- </script>
</body>
</html>
View
@@ -1,5 +1,5 @@
/*!
- * meny 0.2
+ * meny 0.3
* http://lab.hakim.se/meny
* MIT licensed
*
@@ -16,12 +16,23 @@
isActive = false,
isMouseDown = false;
+ var supports3DTransforms = '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;
+
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 );
+ // Fall back to more basic CSS
+ if( !supports3DTransforms ) {
+ document.documentElement.className += 'meny-no-transform';
+ }
+
function onMouseDown( event ) {
isMouseDown = true;
}
@@ -87,14 +98,18 @@
function activate() {
if( isActive === false ) {
isActive = true;
- document.documentElement.classList.add( 'meny-active' );
+
+ // Add the meny-active class and clean up whitespace
+ document.documentElement.className = document.documentElement.className.replace( /\s+$/gi, '' ) + ' meny-active';
}
}
function deactivate() {
if( isActive === true ) {
isActive = false;
- document.documentElement.classList.remove( 'meny-active' );
+
+ // Remove the meny-active class
+ document.documentElement.className = document.documentElement.className.replace( 'meny-active', '' );
}
}

0 comments on commit 41a1f3b

Please sign in to comment.