Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
tree: 49531c723f
94 lines (91 sloc) 3.639 kb
<!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&rsquo;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>
&lt;nav&gt;
&lt;a href=&quot;#&quot;&gt;+&lt;/a&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;&amp;#x263D;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;&amp;#x2600;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;&amp;#x2708;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;&amp;#x2601;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;&amp;hearts;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;&amp;#x263A;&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/nav&gt;</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 &ldquo;open&rdquo; 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&deg;
degrees: 90,
// where the first menu item is placed. 0&deg; is directly to the right, defaults to -90&deg;
offset: -90
})</pre>
</div>
<nav id="arc">
<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="#">&#x2605;</a></li>
<li><a href="#">&hearts;</a></li>
<li><a href="#">&#x263A;</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>
Jump to Line
Something went wrong with that request. Please try again.