Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Newer
Older
100644 125 lines (99 sloc) 5.127 kb
8fd2d1b @hakimel remove extra whitespace
authored
1 <!doctype html>
7b8485d @hakimel initial commit
authored
2 <html lang="en">
8fd2d1b @hakimel remove extra whitespace
authored
3
7b8485d @hakimel initial commit
authored
4 <head>
5 <meta charset="utf-8">
8fd2d1b @hakimel remove extra whitespace
authored
6
bf60423 @hakimel clean up styles
authored
7 <title>Meny - A three dimensional and space efficient menu concept</title>
7b8485d @hakimel initial commit
authored
8
8e8fb4c @hakimel fix animation fallback stop mechanism
authored
9 <meta name="description" content="A three dimensional and space efficient menu created with JavaScript and CSS 3.">
7b8485d @hakimel initial commit
authored
10 <meta name="author" content="Hakim El Hattab">
a88a3a9 @hakimel menu contents
authored
11
8037c55 @hakimel added support to load any page specified in query, fixed viewport for…
authored
12 <meta name="viewport" content="width=800, user-scalable=no">
8fd2d1b @hakimel remove extra whitespace
authored
13
211794c @hakimel prevent initial flicker, basic scroll support #2, now possible to wra…
authored
14 <link href='http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
8fd2d1b @hakimel remove extra whitespace
authored
15
b280078 @hakimel js rewrite
authored
16 <link rel="stylesheet" href="css/demo.css">
7b8485d @hakimel initial commit
authored
17 </head>
8fd2d1b @hakimel remove extra whitespace
authored
18
7b8485d @hakimel initial commit
authored
19 <body>
20
21 <div class="meny">
a88a3a9 @hakimel menu contents
authored
22 <h2>More Experiments</h2>
23 <ul>
ad946e2 @hakimel add fold transition
authored
24 <li><a href="http://lab.hakim.se/avgrund/">Avgrund</a></li>
4464805 @hakimel only attempt to load the test page if the query is a url, temporary s…
authored
25 <li><a href="http://lab.hakim.se/radar/">Radar</a></li>
a88a3a9 @hakimel menu contents
authored
26 <li><a href="http://lab.hakim.se/forkit-js/">forkit.js</a></li>
27 <li><a href="http://lab.hakim.se/scroll-effects/">stroll.js</a></li>
28 <li><a href="http://lab.hakim.se/zoom-js">zoom.js</a></li>
29 <li><a href="http://lab.hakim.se/reveal-js">reveal.js</a></li>
4464805 @hakimel only attempt to load the test page if the query is a url, temporary s…
authored
30 <li><a href="http://itunes.apple.com/us/app/sinuous/id543097218">Sinuous for iOS</a></li>
a88a3a9 @hakimel menu contents
authored
31 <li><a href="http://hakim.se/experiments/css/domtree/">DOM Tree</a></li>
32 <li><a href="http://hakim.se/experiments/css/holobox/">Holobox</a></li>
33 <li><a href="http://hakim.se/experiments/html5/404/netmag.html">404</a></li>
34 </ul>
7b8485d @hakimel initial commit
authored
35 </div>
36
fa4c945 @hakimel setup meny arrow
authored
37 <div class="meny-arrow"></div>
7b8485d @hakimel initial commit
authored
38
1a216e9 @hakimel support for touch events
authored
39 <div class="contents">
8e4c1a8 @hakimel style cleanup and update to description in index
authored
40 <article>
41 <h1>Meny</h1>
42 <p>
9b87d20 @hakimel rewrite demo text, add minified script
authored
43 A three dimensional and space efficient menu.
bf60423 @hakimel clean up styles
authored
44 </p>
8e4c1a8 @hakimel style cleanup and update to description in index
authored
45 <p>
9b87d20 @hakimel rewrite demo text, add minified script
authored
46 Move your mouse towards the arrow &mdash; or swipe in from the arrow if you're on a touch device &mdash; to open.
8fd2d1b @hakimel remove extra whitespace
authored
47 Test it with any page by appending a URL, like so: <a href="http://lab.hakim.se/meny/?u=http://hakim.se">lab.hakim.se/meny/?u=http://hakim.se.</a>
ad946e2 @hakimel add fold transition
authored
48 </p>
49 <p>
9b87d20 @hakimel rewrite demo text, add minified script
authored
50 Meny can be positioned on any side of the screen: <br>
8fd2d1b @hakimel remove extra whitespace
authored
51 <a href="http://lab.hakim.se/meny/?p=top">top</a>
52 - <a href="http://lab.hakim.se/meny/?p=right">right</a>
9b87d20 @hakimel rewrite demo text, add minified script
authored
53 - <a href="http://lab.hakim.se/meny/?p=bottom">bottom</a>
8fd2d1b @hakimel remove extra whitespace
authored
54 - <a href="http://lab.hakim.se/meny/?p=left">left</a>
8e4c1a8 @hakimel style cleanup and update to description in index
authored
55 </p>
56 <p>
9b87d20 @hakimel rewrite demo text, add minified script
authored
57 Instructions and download at <a href="http://github.com/hakimel/meny">github.com/hakimel/meny</a>.
8e4c1a8 @hakimel style cleanup and update to description in index
authored
58 </p>
59 <p>
273f267 @hakimel tap-support (closes #1), update readme
authored
60 The name, <em>Meny</em>, is swedish.
8e4c1a8 @hakimel style cleanup and update to description in index
authored
61 </p>
62 <small>
63 Created by <a href="http://twitter.com/hakimel">@hakimel</a> / <a href="http://hakim.se/">http://hakim.se</a>
64 </small>
65 </article>
dfff3c9 @hakimel improvements & description text
authored
66
ad946e2 @hakimel add fold transition
authored
67 <div class="sharing">
8e8fb4c @hakimel fix animation fallback stop mechanism
authored
68 <a href="http://twitter.com/share" class="twitter-share-button" data-text="Meny - a three dimensional and space efficient menu concept by @hakimel" data-url="http://lab.hakim.se/meny" data-count="small" data-related="hakimel"></a>
8fd2d1b @hakimel remove extra whitespace
authored
69
70 <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>
ad946e2 @hakimel add fold transition
authored
71 </div>
72
4530fc5 @hakimel gh ribbon fix
authored
73 <a href="https://github.com/hakimel/meny"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://github-camo.global.ssl.fastly.net/365986a132ccd6a44c23a9169022c0b5c890c387/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67" alt="Fork me on GitHub"></a>
8037c55 @hakimel added support to load any page specified in query, fixed viewport for…
authored
74 </div>
7b8485d @hakimel initial commit
authored
75
41935ac @hakimel use regular, non-minfied, js in index
authored
76 <script src="js/meny.js"></script>
8037c55 @hakimel added support to load any page specified in query, fixed viewport for…
authored
77 <script>
bf60423 @hakimel clean up styles
authored
78 // Create an instance of Meny
b280078 @hakimel js rewrite
authored
79 var meny = Meny.create({
9b87d20 @hakimel rewrite demo text, add minified script
authored
80 // The element that will be animated in from off screen
b280078 @hakimel js rewrite
authored
81 menuElement: document.querySelector( '.meny' ),
9b87d20 @hakimel rewrite demo text, add minified script
authored
82
83 // The contents that gets pushed aside while Meny is active
1a216e9 @hakimel support for touch events
authored
84 contentsElement: document.querySelector( '.contents' ),
9b87d20 @hakimel rewrite demo text, add minified script
authored
85
8e9e122 @hakimel js animation fallback
authored
86 // [optional] The alignment of the menu (top/right/bottom/left)
9b87d20 @hakimel rewrite demo text, add minified script
authored
87 position: Meny.getQuery().p || 'left',
88
8e9e122 @hakimel js animation fallback
authored
89 // [optional] The height of the menu (when using top/bottom position)
bf60423 @hakimel clean up styles
authored
90 height: 200,
9b87d20 @hakimel rewrite demo text, add minified script
authored
91
8e9e122 @hakimel js animation fallback
authored
92 // [optional] The width of the menu (when using left/right position)
4e3cd23 @hakimel fix transform origin error
authored
93 width: 260,
94
8e9e122 @hakimel js animation fallback
authored
95 // [optional] Distance from mouse (in pixels) when menu should open
1bb6a1d @hakimel add config option for disabling mouse/touch tracking #22
authored
96 threshold: 40,
97
98 // [optional] Use mouse movement to automatically open/close
99 mouse: true,
100
101 // [optional] Use touch swipe events to open/close
102 touch: true
b280078 @hakimel js rewrite
authored
103 });
bf60423 @hakimel clean up styles
authored
104
105 // API Methods:
8e9e122 @hakimel js animation fallback
authored
106 // meny.open();
107 // meny.close();
108 // meny.isOpen();
8fd2d1b @hakimel remove extra whitespace
authored
109
7370bcd @hakimel add open/close events
authored
110 // Events:
111 // meny.addEventListener( 'open', function(){ console.log( 'open' ); } );
112 // meny.addEventListener( 'close', function(){ console.log( 'close' ); } );
9b87d20 @hakimel rewrite demo text, add minified script
authored
113
211794c @hakimel prevent initial flicker, basic scroll support #2, now possible to wra…
authored
114 // Embed an iframe if a URL is passed in
9b87d20 @hakimel rewrite demo text, add minified script
authored
115 if( Meny.getQuery().u && Meny.getQuery().u.match( /^http/gi ) ) {
bf60423 @hakimel clean up styles
authored
116 var contents = document.querySelector( '.contents' );
8037c55 @hakimel added support to load any page specified in query, fixed viewport for…
authored
117 contents.style.padding = '0px';
9b87d20 @hakimel rewrite demo text, add minified script
authored
118 contents.innerHTML = '<div class="cover"></div><iframe src="'+ Meny.getQuery().u +'" style="width: 100%; height: 100%; border: 0; position: absolute;"></iframe>';
8037c55 @hakimel added support to load any page specified in query, fixed viewport for…
authored
119 }
120 </script>
ad946e2 @hakimel add fold transition
authored
121
122 <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
123
7b8485d @hakimel initial commit
authored
124 </body>
125 </html>
Something went wrong with that request. Please try again.