Permalink
Browse files

removing Lorem Ipsum

  • Loading branch information...
1 parent 41b1d35 commit 68e5293efa794cc13f322ccfcc1e25f5d60d9b5a @beaucollins committed Dec 5, 2011
Showing with 31 additions and 44 deletions.
  1. +31 −44 index.html
View
@@ -11,49 +11,37 @@
<a href="http://github.com/beaucollins/radial-menu/">View Source on GitHub</a>
<div id="app">
-
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
- ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
- laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
- voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
- non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
- ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
- laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
- voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
- non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
- ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
- laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
- voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
- non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
- ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
- laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
- voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
- non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
- ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
- laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
- voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
- non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
- ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
- laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
- voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
- non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
- ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
- laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
- voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
- non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-
+ <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 only in WebKit browsers (mobile and desktop).</p>
+ <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>
<a href="#">+</a>
@@ -69,7 +57,6 @@
<script type="text/javascript" charset="utf-8">
var m = new Menu(document.getElementsByTagName('nav')[0], { radius: 130 });
- if (true) {};
var app = document.querySelector('#app');
if(app.ontouchmove !== undefined){
app.addEventListener('touchmove', function(){

0 comments on commit 68e5293

Please sign in to comment.