Permalink
Browse files

added support to load any page specified in query, fixed viewport for…

… ipad
  • Loading branch information...
1 parent ec66fbb commit 8037c55e9ab6ed103d65b7d7d42800e6b93356d7 @hakimel hakimel committed Aug 5, 2012
Showing with 31 additions and 18 deletions.
  1. +8 −7 css/meny.css
  2. +16 −4 index.html
  3. +7 −7 js/meny.js
View
@@ -114,11 +114,11 @@ body {
-o-transform-origin: 0% 50%;
transform-origin: 0% 50%;
- -webkit-transform: rotateY( -30deg ) translateX( -98% );
- -moz-transform: rotateY( -30deg ) translateX( -98% );
- -ms-transform: rotateY( -30deg ) translateX( -98% );
- -o-transform: rotateY( -30deg ) translateX( -98% );
- transform: rotateY( -30deg ) translateX( -98% );
+ -webkit-transform: rotateY( -30deg ) translateX( -97% );
+ -moz-transform: rotateY( -30deg ) translateX( -97% );
+ -ms-transform: rotateY( -30deg ) translateX( -97% );
+ -o-transform: rotateY( -30deg ) translateX( -97% );
+ transform: rotateY( -30deg ) translateX( -97% );
}
.meny-active .meny {
-webkit-transform: rotateY(0deg);
@@ -144,7 +144,7 @@ body {
.meny-contents {
background: #eee;
- padding: 20px 30px;
+ padding: 20px 40px;
width: 100%;
height: 100%;
@@ -198,14 +198,15 @@ body {
transition: all .4s ease;
}
.meny-active .meny-contents .cover {
+ z-index: 2;
visibility: visible;
opacity: 1;
}
.meny-arrow {
position: absolute;
top: 45%;
- left: 10px;
+ left: 12px;
z-index: 2;
font-size: 20px;
View
@@ -11,7 +11,7 @@
<link href='http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
- <meta name="viewport" content="width=device-width, initial-scale=0.6, maximum-scale=0.6, minimum-scale=0.6, user-scalable=no">
+ <meta name="viewport" content="width=800, user-scalable=no">
<link rel="stylesheet" href="css/meny.css">
</head>
@@ -39,10 +39,13 @@
<!-- Contents that will be rotated when the meny is expanded -->
<div class="meny-contents">
<div class="cover"></div>
+
<h1>Meny</h1>
<p>
- A UI experiment with a 3D fold-in menu. 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.
+ A UI experiment with a 3D fold-in menu. 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.
+ </p>
+ <p>
+ Pass in a URL to test it with any page, for example: <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. The source
@@ -57,9 +60,18 @@
<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>
- </div class="meny-contents">
+ </div>
<script src="js/meny.js"></script>
+ <script>
+
+ if( window.location.search.length ) {
+ var contents = document.querySelector( '.meny-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>';
+ }
+
+ </script>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
View
@@ -12,8 +12,8 @@
startTouchX = 0,
isActive = false;
- window.addEventListener( 'mousemove', onMouseMove, false );
- window.addEventListener( 'touchstart', onTouchStart, false );
+ document.addEventListener( 'mousemove', onMouseMove, false );
+ document.addEventListener( 'touchstart', onTouchStart, false );
function onMouseMove( event ) {
var x = event.clientX,
@@ -33,8 +33,8 @@
if( isActive || lastTouchX < activateX ) {
event.preventDefault();
- window.addEventListener( 'touchmove', onTouchMove, false );
- window.addEventListener( 'touchend', onTouchEnd, false );
+ document.addEventListener( 'touchmove', onTouchMove, false );
+ document.addEventListener( 'touchend', onTouchEnd, false );
}
}
@@ -48,10 +48,10 @@
activate();
}
}
-
+
function onTouchEnd( event ) {
- window.addEventListener( 'touchmove', onTouchMove, false );
- window.addEventListener( 'touchend', onTouchEnd, false );
+ document.addEventListener( 'touchmove', onTouchMove, false );
+ document.addEventListener( 'touchend', onTouchEnd, false );
}
function activate() {

0 comments on commit 8037c55

Please sign in to comment.