-
Notifications
You must be signed in to change notification settings - Fork 35
/
index.html
94 lines (91 loc) · 3.55 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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<!DOCTYPE html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Radial Menu Demo</title>
<link rel="stylesheet" href="style.css?version=1" type="text/css" media="screen" charset="utf-8">
<meta name="viewport" content="width=device-width,user-scalable=no,maximum-scale=1">
<script type="text/javascript" src="menu.js?version=1" charset="utf-8"></script>
</head>
<body>
<a href="http://github.com/beaucollins/radial-menu/">View Source on GitHub</a>
<div id="app">
<h1>Radial Menu</h1>
<p>A knock-off of the menu in the native iOS and Android <a href="http://path.com">Path</a> apps. Works great in WebKit browsers (desktop and iOS) and does ok on Firefox.</p>
<p>Here’s one that goes full circle just for fun:</p>
<nav id="full">
<a href="#">+</a>
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">7</a></li>
<li><a href="#">8</a></li>
<li><a href="#">9</a></li>
<li><a href="#">10</a></li>
<li><a href="#">11</a></li>
<li><a href="#">12</a></li>
</ul>
</nav>
<script type="text/javascript" charset="utf-8">
var full = new Menu(document.querySelector('#full'), {
degrees: 360,
offset: 180,
radius: 100
});
</script>
<h2>How it works</h2>
<p>HTML markup is kept simple:</p>
<pre>
<nav>
<a href="#">+</a>
<ul>
<li><a href="#">&#x263D;</a></li>
<li><a href="#">&#x2600;</a></li>
<li><a href="#">&#x2708;</a></li>
<li><a href="#">&#x2601;</a></li>
<li><a href="#">&hearts;</a></li>
<li><a href="#">&#x263A;</a></li>
</ul>
</nav></pre>
<p>The CSS takes care of the rounded corners, gradient fills, drop-shadows and initial positioning of all the elements.</p>
<p>JavaScript is used to determine the “open” position of each element and generates the necessary animations using <code>@-webkit-keyframes</code>. This allows the menu to adapt to how many elements are in it.</p>
<p>There are three options to configure the menu:</p>
<pre>
// get a reference to the node to be used
var node = document.querySelector('nav');
var menu = new Menu(node, {
// how far from the menu (in pixels) the menu items will be
radius: 200,
// how many degrees (out of 360) to use for the items, defaults to 90°
degrees: 90,
// where the first menu item is placed. 0° is directly to the right, defaults to -90°
offset: -90
})</pre>
</div>
<nav id="arc">
<a href="#">+</a>
<ul>
<li><a href="#">☽</a></li>
<li><a href="#">☀</a></li>
<li><a href="#">✈</a></li>
<li><a href="#">★</a></li>
<li><a href="#">♥</a></li>
<li><a href="#">☺</a></li>
</ul>
</nav>
<script type="text/javascript" charset="utf-8">
var m = new Menu(document.querySelector('#arc'), { radius: 130 });
var app = document.querySelector('#app');
if(app.ontouchmove !== undefined){
app.addEventListener('touchmove', function(){
m.close();
});
} else {
app.addEventListener('scroll', function(){
m.close();
})
}
</script>
</body>