Skip to content
Find file
Fetching contributors…
Cannot retrieve contributors at this time
77 lines (63 sloc) 3.15 KB
<!doctype html>
<html lang="en">
<meta charset="utf-8">
<title>Meny - CSS 3D fold-in menu concept</title>
<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">
<meta name="viewport" content="width=800, user-scalable=no">
<link href=',700,400italic,700italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/meny.css">
<!-- Menu element that rolls in from the left -->
<div class="meny">
<h2>More Experiments</h2>
<li><a href="">Radar</a></li>
<li><a href="">forkit.js</a></li>
<li><a href="">stroll.js</a></li>
<li><a href="">zoom.js</a></li>
<li><a href="">reveal.js</a></li>
<li><a href="">Sinuous for iOS</a></li>
<li><a href="">DOM Tree</a></li>
<li><a href="">Holobox</a></li>
<li><a href="">404</a></li>
<!-- Arrow that appears from the left when menu is collapsed -->
<div class="meny-arrow">&#x25BA;</div>
<!-- Contents that will be rotated when the meny is expanded -->
<div class="meny-contents">
<div class="cover"></div>
A three dimensional and space efficient menu concept.</p>
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.
Pass in a URL to test it with any page, like so: <a href=""></a>
CSS 3D transforms are used for the transition effect and JavaScript is used to track mouse/touch movement.
The name, <em>Meny</em>, is swedish.
Created by <a href="">@hakimel</a> / <a href=""></a>
<a class="fork-reveal" href=""><img style="position: absolute; top: 0; right: 0; border: 0;" src="" alt="Fork me on GitHub"></a>
<script src="js/meny.js"></script>
// Embed an iframe if a URL is passed in
if( && /^\?(http|www)/gi ) ) {
var contents = document.querySelector( '.meny-contents' ); = '0px';
contents.innerHTML = '<div class="cover"></div><iframe src="'+ 1 ) +'" style="width: 100%; height: 100%; border: 0; position: absolute;"></iframe>';
Something went wrong with that request. Please try again.