Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

menu contents

  • Loading branch information...
commit a88a3a9f1783f6b7aa862546ac6eb32668463e4e 1 parent 82b4b4e
@hakimel hakimel authored
Showing with 75 additions and 10 deletions.
  1. +28 −3 css/meny.css
  2. +14 −2 index.html
  3. +33 −5 js/meny.js
View
31 css/meny.css
@@ -6,6 +6,7 @@
html,
body {
height: 100%;
+ overflow: hidden;
}
body {
@@ -13,7 +14,7 @@ body {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAGklEQVQIW2NkYGD4D8SMQAwGcAY2AbBKDBUAVuYCBQPd34sAAAAASUVORK5CYII=);
background-repeat: repeat;
- font-family: 'Lato', Times, 'Times New Roman', serif;
+ font-family: 'Lato', Helvetica, sans-serif;
font-size: 16px;
color: #222;
}
@@ -56,6 +57,9 @@ small {
display: block;
margin: 10px 0 20px 0;
color: #333;
+ font-size: 0.85em;
+
+ -webkit-text-size-adjust: none;
}
.sharing {
@@ -124,6 +128,20 @@ body {
transform: rotateY(0deg);
}
+.meny ul {
+ margin-top: 10px;
+}
+ .meny ul li {
+ list-style: none;
+ font-size: 20px;
+ padding: 3px 10px;
+ }
+ .meny ul li:before {
+ content: '-';
+ margin-right: 5px;
+ color: rgba( 255, 255, 255, 0.2 );
+ }
+
.meny-contents {
background: #eee;
padding: 20px 30px;
@@ -163,8 +181,15 @@ body {
top: 0;
left: 0;
visibility: hidden;
- background: rgba( 0, 0, 0, 0 );
z-index: 1000;
+ opacity: 0;
+
+ background: -moz-linear-gradient(left, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.65) 100%);
+ background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,0.15)), color-stop(100%,rgba(0,0,0,0.65)));
+ background: -webkit-linear-gradient(left, rgba(0,0,0,0.15) 0%,rgba(0,0,0,0.65) 100%);
+ background: -o-linear-gradient(left, rgba(0,0,0,0.15) 0%,rgba(0,0,0,0.65) 100%);
+ background: -ms-linear-gradient(left, rgba(0,0,0,0.15) 0%,rgba(0,0,0,0.65) 100%);
+ background: linear-gradient(to right, rgba(0,0,0,0.15) 0%,rgba(0,0,0,0.65) 100%);
-webkit-transition: all .4s ease;
-moz-transition: all .4s ease;
@@ -174,7 +199,7 @@ body {
}
.meny-active .meny-contents .cover {
visibility: visible;
- background: rgba( 0, 0, 0, 0.5 );
+ opacity: 1;
}
.meny-arrow {
View
16 index.html
@@ -10,6 +10,8 @@
<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=device-width, initial-scale=0.6, maximum-scale=0.6, minimum-scale=0.6, user-scalable=no">
<link rel="stylesheet" href="css/meny.css">
</head>
@@ -18,7 +20,17 @@
<!-- Menu element that rolls in from the left -->
<div class="meny">
- <h2>A hidden menu</h2>
+ <h2>More Experiments</h2>
+ <ul>
+ <li><a href="http://lab.hakim.se/radar/">radar</a></li>
+ <li><a href="http://lab.hakim.se/forkit-js/">forkit.js</a></li>
+ <li><a href="http://lab.hakim.se/scroll-effects/">stroll.js</a></li>
+ <li><a href="http://lab.hakim.se/zoom-js">zoom.js</a></li>
+ <li><a href="http://lab.hakim.se/reveal-js">reveal.js</a></li>
+ <li><a href="http://hakim.se/experiments/css/domtree/">DOM Tree</a></li>
+ <li><a href="http://hakim.se/experiments/css/holobox/">Holobox</a></li>
+ <li><a href="http://hakim.se/experiments/html5/404/netmag.html">404</a></li>
+ </ul>
</div>
<!-- Arrow that appears from the left when menu is collapsed -->
@@ -29,7 +41,7 @@
<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 to the right if you're on a touch device &mdash; to expand the
+ 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>
View
38 js/meny.js
@@ -9,10 +9,11 @@
var activateX = 40,
deactivateX = 300,
+ startTouchX = 0,
isActive = false;
window.addEventListener( 'mousemove', onMouseMove, false );
- window.addEventListener( 'touchmove', onTouchMove, false );
+ window.addEventListener( 'touchstart', onTouchStart, false );
function onMouseMove( event ) {
var x = event.clientX,
@@ -26,18 +27,45 @@
}
}
+ function onTouchStart( event ) {
+ lastTouchX = event.touches[0].clientX;
+
+ if( isActive || lastTouchX < activateX ) {
+ event.preventDefault();
+
+ window.addEventListener( 'touchmove', onTouchMove, false );
+ window.addEventListener( 'touchend', onTouchEnd, false );
+ }
+ }
+
function onTouchMove( event ) {
+ var x = event.touches[0].clientX;
+ if( isActive && x < lastTouchX - activateX ) {
+ deactivate();
+ }
+ else if( !isActive && lastTouchX < activateX && x > lastTouchX + activateX ) {
+ activate();
+ }
+ }
+
+ function onTouchEnd( event ) {
+ window.addEventListener( 'touchmove', onTouchMove, false );
+ window.addEventListener( 'touchend', onTouchEnd, false );
}
function activate() {
- isActive = true;
- document.documentElement.classList.add( 'meny-active' );
+ if( isActive === false ) {
+ isActive = true;
+ document.documentElement.classList.add( 'meny-active' );
+ }
}
function deactivate() {
- isActive = false;
- document.documentElement.classList.remove( 'meny-active' );
+ if( isActive === true ) {
+ isActive = false;
+ document.documentElement.classList.remove( 'meny-active' );
+ }
}
})();
Please sign in to comment.
Something went wrong with that request. Please try again.