Fire JS Bin - Meny

You can jump to the latest bin by adding /latest to your URL

Find

⟲

Replace

/*!
 * meny 0.3
 * http://lab.hakim.se/meny
 * MIT licensed
 *
 * Created by Hakim El Hattab, http://hakim.se
 */
(function(){

var meny = document.querySelector( '.meny' );

var activateX = 40,
		deactivateX = meny.offsetWidth || 300,
		touchStartX = null,
		touchMoveX = null,
		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;
	}

function onMouseMove( event ) {
		// Prevent opening/closing when mouse is down since 
		// the user may be selecting text
		if( !isMouseDown ) {
			var x = event.clientX;

if( x > deactivateX ) {
				deactivate();
			}
			else if( x < activateX ) {
				activate();
			}
		}
	}

function onMouseUp( event ) {
		isMouseDown = false;
	}

function onTouchStart( event ) {
		touchStartX = event.touches[0].clientX;
		touchMoveX = null;

if( isActive || touchStartX < activateX ) {
			document.addEventListener( 'touchmove', onTouchMove, false );
		}
	}

function onTouchMove( event ) {
		touchMoveX = event.touches[0].clientX;

if( isActive && touchMoveX < touchStartX - activateX ) {
			deactivate();
			event.preventDefault();
		}
		else if( touchStartX < activateX && touchMoveX > touchStartX + activateX ) {
			activate();
			event.preventDefault();
		}
	}

function onTouchEnd( event ) {
		document.addEventListener( 'touchmove', onTouchMove, false );

// If there was no movement this was a tap
		if( touchMoveX === null ) {
			// Hide the menu when tapping on the content area
			if( touchStartX > deactivateX ) {
				deactivate();
			}
			// Show the meny when tapping on the left edge
			else if( touchStartX < activateX * 2 ) {
				activate();
			}
		}
		
	}

function activate() {
		if( isActive === false ) {
			isActive = true;

// 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;

// Remove the meny-active class
			document.documentElement.className = document.documentElement.className.replace( 'meny-active', '' );
		}
	}

})();

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>';
}

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>

</head>
<body>
		
		<div class="meny">
			<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://itunes.apple.com/us/app/sinuous/id543097218">Sinuous for iOS</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>

<div class="meny-arrow">►</div>

<div class="meny-contents">
			<div class="cover"></div>

<article>
				<h1>Meny</h1>
				<p>
					A three dimensional and space efficient menu concept.</p>
				<p>
					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: <a href="http://lab.hakim.se/meny/?http://hakim.se">lab.hakim.se/meny/?http://hakim.se.</a>
				</p>
				<p>
					CSS 3D transforms are used for the transition effect and JavaScript is used to track mouse/touch movement.
				</p>
				<p>
					The name, <em>Meny</em>, is swedish.
				</p>
				<small>
					Created by <a href="http://twitter.com/hakimel">@hakimel</a> / <a href="http://hakim.se/">http://hakim.se</a>
				</small>
			</article>

/*!
 * meny 0.3
 * http://lab.hakim.se/meny
 * MIT licensed
 *
 * Created by Hakim El Hattab, http://hakim.se
 */

html, 
body {
	height: 100%;
	overflow: hidden;
}

body {
	background-color: #222;
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAGklEQVQIW2NkYGD4D8SMQAwGcAY2AbBKDBUAVuYCBQPd34sAAAAASUVORK5CYII=);
	background-repeat: repeat;

font-family: 'Lato', Helvetica, sans-serif;
	font-size: 16px;
	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;
	
	-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%;
}

.meny,
.meny-contents {
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;

-webkit-transition: -webkit-transform .4s ease;
	   -moz-transition: -moz-transform .4s ease;
	    -ms-transition: -ms-transform .4s ease;
	     -o-transition: -o-transform .4s ease;
	        transition: transform .4s ease;
}

.meny {
	position: fixed;
	height: 100%;
	width: 300px;
	z-index: 1;
	margin: 0px;
	padding: 20px;

-webkit-transform-origin: 0% 50%;
	   -moz-transform-origin: 0% 50%;
	    -ms-transform-origin: 0% 50%;
	     -o-transform-origin: 0% 50%;
	        transform-origin: 0% 50%;

-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);
		   -moz-transform: rotateY(0deg);
		    -ms-transform: rotateY(0deg);
		     -o-transform: rotateY(0deg);
		        transform: rotateY(0deg);
	}

.meny-contents {
	background: #eee;
	padding: 20px 40px;
	width: 100%;
	height: 100%;

-webkit-transform-origin: 0% 50%;
	   -moz-transform-origin: 0% 50%;
	    -ms-transform-origin: 0% 50%;
	     -o-transform-origin: 0% 50%;
	        transform-origin: 0% 50%;
}
	.meny-active .meny-contents {
		-webkit-transform: translateX( 300px ) rotateY( 15deg );
		   -moz-transform: translateX( 300px ) rotateY( 15deg );
		    -ms-transform: translateX( 300px ) rotateY( 15deg );
		     -o-transform: translateX( 300px ) rotateY( 15deg );
		        transform: translateX( 300px ) rotateY( 15deg );
	}

.meny-contents .cover {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	visibility: hidden;
	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;
	    -ms-transition: all .4s ease;
	     -o-transition: all .4s ease;
	        transition: all .4s ease;
}
	.meny-active .meny-contents .cover {
		z-index: 2;
		visibility: visible;
		opacity: 1;
	}

.meny-arrow {
	position: absolute;
	top: 45%;
	left: 12px;
	z-index: 2;
	font-family: sans-serif;

font-size: 20px;
	color: #333;

-webkit-transition: left 0.8s cubic-bezier(0.680, -0.550, 0.265, 1.550); 
	   -moz-transition: left 0.8s cubic-bezier(0.680, -0.550, 0.265, 1.550); 
	    -ms-transition: left 0.8s cubic-bezier(0.680, -0.550, 0.265, 1.550); 
	     -o-transition: left 0.8s cubic-bezier(0.680, -0.550, 0.265, 1.550); 
	        transition: left 0.8s cubic-bezier(0.680, -0.550, 0.265, 1.550);
}
	.meny-active .meny-arrow {
		left: -40px;
	}

/**
 * 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:
 */

.meny {
	background: #333;
	color: #eee;
}
	.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>article {
	max-width: 400px;
}
.meny-contents p {
	margin: 10px 0 10px 0;
	font-size: 16px;
	line-height: 1.32;
}

.meny-contents small {
	display: block;
	margin-top: 10px;
	padding-top: 10px;
	color: #333;
	font-size: 0.85em;
	border-top: 1px dashed #ccc;

-webkit-text-size-adjust: none;
}

.meny-contents .sharing {
	position: absolute;
	bottom: 20px;
}

Pop out