Skip to content
Browse files

prevent initial flicker, basic scroll support #2, now possible to wra…

…p menu in a smaller element and place anywhere on the page
  • Loading branch information...
1 parent 41a1f3b commit 211794c5af11ceeffc3c43be444024edaa3387a9 @hakimel hakimel committed Aug 8, 2012
Showing with 78 additions and 49 deletions.
  1. +57 −38 css/meny.css
  2. +4 −5 index.html
  3. +17 −6 js/meny.js
View
95 css/meny.css
@@ -1,11 +1,16 @@
/*!
- * meny 0.3
+ * meny 0.4
* http://lab.hakim.se/meny
* MIT licensed
*
* Created by Hakim El Hattab, http://hakim.se
*/
+* {
+ margin: 0;
+ padding: 0;
+}
+
html,
body {
height: 100%;
@@ -22,48 +27,21 @@ body {
color: #222;
}
-* {
- margin: 0;
- padding: 0;
-}
-
-a {
- color: #c2575b;
- text-decoration: none;
-
- -webkit-transition: 0.15s color ease;
- -moz-transition: 0.15s color ease;
- -ms-transition: 0.15s color ease;
- -o-transition: 0.15s color ease;
- transition: 0.15s color ease;
-}
- a:hover {
- color: #f76f76;
- }
-
-h1,
-h2 {
- font-size: 24px;
-}
-
-body {
- -webkit-transition: -webkit-perspective .4s ease;
- -moz-transition: -moz-perspective .4s ease;
- -ms-transition: -ms-perspective .4s ease;
- -o-transition: -o-perspective .4s ease;
- transition: perspective .4s ease;
-
+/**
+ * Element which wraps all of the other .meny parts
+ */
+.meny-wrapper {
-webkit-perspective: 800px;
-moz-perspective: 800px;
-ms-perspective: 800px;
-o-perspective: 800px;
perspective: 800px;
- -webkit-perspective-origin: 0% 50%;
- -moz-perspective-origin: 0% 50%;
- -ms-perspective-origin: 0% 50%;
- -o-perspective-origin: 0% 50%;
- perspective-origin: 0% 50%;
+ -webkit-perspective-origin: 0% 50%;
+ -moz-perspective-origin: 0% 50%;
+ -ms-perspective-origin: 0% 50%;
+ -o-perspective-origin: 0% 50%;
+ perspective-origin: 0% 50%;
}
.meny,
@@ -79,7 +57,11 @@ body {
transition: transform .4s ease;
}
+/**
+ * The menu element which expands out from the left.
+ */
.meny {
+ display: none;
position: fixed;
height: 100%;
width: 300px;
@@ -99,6 +81,9 @@ body {
-o-transform: rotateY( -30deg ) translateX( -97% );
transform: rotateY( -30deg ) translateX( -97% );
}
+ .meny-ready .meny {
+ display: block;
+ }
.meny-active .meny {
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
@@ -107,11 +92,15 @@ body {
transform: rotateY(0deg);
}
+/**
+ * Page contents which gets pushed aside while meny is active.
+ */
.meny-contents {
background: #eee;
padding: 20px 40px;
width: 100%;
height: 100%;
+ overflow-y: auto;
-webkit-transform-origin: 0% 50%;
-moz-transform-origin: 0% 50%;
@@ -127,7 +116,12 @@ body {
transform: translateX( 300px ) rotateY( 15deg );
}
+/**
+ * A shadow-like element placed on top of the contents while
+ * meny is active.
+ */
.meny-contents .cover {
+ display: none;
position: absolute;
width: 100%;
height: 100%;
@@ -150,12 +144,17 @@ body {
-o-transition: all .4s ease;
transition: all .4s ease;
}
+ .meny-ready .meny-contents .cover {
+ display: block;
+ }
.meny-active .meny-contents .cover {
- z-index: 2;
visibility: visible;
opacity: 1;
}
+/**
+ * Graphic that highlights menu availability while inactive.
+ */
.meny-arrow {
position: absolute;
top: 45%;
@@ -174,6 +173,7 @@ body {
}
.meny-active .meny-arrow {
left: -40px;
+ opacity: 0;
}
@@ -209,6 +209,25 @@ body {
* Styles that are more or less specific to the demo page:
*/
+a {
+ color: #c2575b;
+ text-decoration: none;
+
+ -webkit-transition: 0.15s color ease;
+ -moz-transition: 0.15s color ease;
+ -ms-transition: 0.15s color ease;
+ -o-transition: 0.15s color ease;
+ transition: 0.15s color ease;
+}
+ a:hover {
+ color: #f76f76;
+ }
+
+h1,
+h2 {
+ font-size: 24px;
+}
+
.meny {
background: #333;
color: #eee;
View
9 index.html
@@ -6,13 +6,13 @@
<title>Meny - CSS 3D fold-in menu concept</title>
- <meta name="description" content="A playful JavaScript+CSS ribbon">
+ <meta name="description" content="A three dimensional and space efficient menu concept created with JavaScript and CSS 3.">
<meta name="author" content="Hakim El Hattab">
-
- <link href='http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<meta name="viewport" content="width=800, user-scalable=no">
+ <link href='http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
+
<link rel="stylesheet" href="css/meny.css">
</head>
@@ -65,13 +65,12 @@
<script src="js/meny.js"></script>
<script>
-
+ // Embed an iframe if a URL is passed in
if( window.location.search.length && window.location.search.match( /^\?(http|www)/gi ) ) {
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>
</body>
View
23 js/meny.js
@@ -1,5 +1,5 @@
/*!
- * meny 0.3
+ * meny 0.4
* http://lab.hakim.se/meny
* MIT licensed
*
@@ -8,8 +8,17 @@
(function(){
var meny = document.querySelector( '.meny' );
+ var menyWrapper = meny.parentNode;
- var activateX = 40,
+ // Avoid throwing errors if the script runs on a page with
+ // no .meny
+ if( !meny || !menyWrapper ) { return; }
+
+ // Add a class to identify the parent of the meny parts
+ menyWrapper.className += ' meny-wrapper';
+
+ var indentX = menyWrapper.offsetLeft,
+ activateX = 40,
deactivateX = meny.offsetWidth || 300,
touchStartX = null,
touchMoveX = null,
@@ -30,9 +39,11 @@
// Fall back to more basic CSS
if( !supports3DTransforms ) {
- document.documentElement.className += 'meny-no-transform';
+ document.documentElement.className += ' meny-no-transform';
}
+ document.documentElement.className += ' meny-ready';
+
function onMouseDown( event ) {
isMouseDown = true;
}
@@ -41,7 +52,7 @@
// Prevent opening/closing when mouse is down since
// the user may be selecting text
if( !isMouseDown ) {
- var x = event.clientX;
+ var x = event.clientX - indentX;
if( x > deactivateX ) {
deactivate();
@@ -57,7 +68,7 @@
}
function onTouchStart( event ) {
- touchStartX = event.touches[0].clientX;
+ touchStartX = event.touches[0].clientX - indentX;
touchMoveX = null;
if( isActive || touchStartX < activateX ) {
@@ -66,7 +77,7 @@
}
function onTouchMove( event ) {
- touchMoveX = event.touches[0].clientX;
+ touchMoveX = event.touches[0].clientX - indentX;
if( isActive && touchMoveX < touchStartX - activateX ) {
deactivate();

0 comments on commit 211794c

Please sign in to comment.
Something went wrong with that request. Please try again.