-
Notifications
You must be signed in to change notification settings - Fork 4
/
index.html
38 lines (38 loc) · 1.65 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Morphing (hamburger) menu</title>
<link rel="stylesheet" href="index.css">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="icon" href="http://iamvdo.me/images/favicon.png">
</head>
<body>
<h1>Morphing (hamburger) menu</h1>
<div class="parentPhone">
<div class="use"></div>
<div class="phone">
<div class="screen">
<iframe src="embed.html" frameborder="0"></iframe>
</div>
</div>
<div class="resize"></div>
</div>
<div class="info">
<p><a href="embed.html">Test fullscreen</a></p>
<p><a href="https://medium.com/elepath-exports/spatial-interfaces-886bccc5d1e9#.4553ef3ze">Spatial interfaces concept</a>. Idea from this <a href="https://dribbble.com/shots/2419677-Menu-Miniaturization">Dribbble shot</a>. All animations are 60FPS.</p>
<p>Created by <a href="https://twitter.com/iamvdo">@iamvdo</a>. <a href="https://github.com/iamvdo/morphing-hamburger-menu">Code on GitHub</a>. More UI experiments on <a href="http://iamvdo.me/en/design">iamvdo.me/design</a></p>
</div>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-17376769-7']);
_gaq.push(['_setDomainName', 'iamvdo.me']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>