The Menu

beaucollins · Dec 3, 2011 · b9e4a99 · b9e4a99
commit b9e4a99
Show file tree

Hide file tree

Showing 7 changed files with 320 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -0,0 +1,31 @@
+Radial Menu
+===========
+
+An HTML/CSS/JavaScript implementation of the lovely radial menu in the [Path][] app.
+
+[See the demo][demo] (requires a webkit browser)
+
+[demo]: http://beaucollins.github.com/radial-menu
+[Path]: https://path.com/
+
+Markup
+-----
+
+Adapts to the number of links you have in your menu.
+
+    <nav>
+      <ul>
+        <li><a href="#">1</a></li>
+        <li><a href="#">2</a></li>
+        <li><a href="#">3</a></li>
+      </ul>
+    </nav>
+
+Configure the radius and the degrees to be used for the arc.
+
+    var m = new Menu(document.querySelector('nav'), {
+      radius: 130,
+      degrees: 90,
+      offset: -90
+    });
+
diff --git a/index.html b/index.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<head>
+  <meta http-equiv="Content-type" content="text/html; charset=utf-8">
+  <title>index</title>
+  <link rel="stylesheet" href="style.css" type="text/css" media="screen" charset="utf-8">
+  <meta name="viewport" content="width=device-width,user-scalable=no">
+  <script type="text/javascript" src="menu.js" charset="utf-8"></script>
+</head>
+<body id="index" onload="">
+
+  <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>
+
+  </div>
+  <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>
+
+  <script type="text/javascript" charset="utf-8">
+    var m = new Menu(document.getElementsByTagName('nav')[0], { radius: 130 });
+  </script>
+</body>
diff --git a/menu.js b/menu.js
@@ -0,0 +1,119 @@
+var Menu = function(element, options){
+  if(!options) options = {};
+  options = {
+    degrees: options.degrees || 90,
+    offset: options.degrees || -90,
+    radius: options.radius || 150
+  }
+
+  this.node = element;
+  this.menu_items = element.querySelectorAll('li');
+  this.button = element.querySelector('a');
+  this.open = false;
+
+  var sheet = document.styleSheets[0];
+  var degrees = options.degrees;
+  var radius = options.radius;
+  var offset = options.offset;
+  var menu = this;
+  //this.positionItems();
+  // lets position them
+  this.eachItem(function(item, index, items){
+    // create the animation
+    var degree = ((degrees / (items.length-1)) * index) + offset,
+        position = Menu.degreeToPosition(degree),
+        x = Math.round((position.x * radius)),
+        y = Math.round((position.y * radius)),
+        name = "ani-" + index,
+        delay = index * 4;
+
+    var rule = "@-webkit-keyframes " + name + "{ \
+       from {-webkit-transform: translate3d(0px, 0px, 0px); -webkit-transform-timing-function: ease-out; }\
+       " + (delay + 10) + "% { -webkit-transform: translate3d(0px, 0px, 0px);}\
+       " + (40 + index * 3) + "% { -webkit-transform: translate3d(" + (x * 1.2) + "px, " + (y * 1.2) + "px, 0px); -webkit-transform-timing-function: ease-in; }\
+       65% { -webkit-transform: translate3d(" + (x*0.95) + "px, " + (y*0.95) + "px, 0px); -webkit-timing-function:ease-in-out}\
+       to { -webkit-transform: translate3d(" + x + "px, " + y + "px, 0px);}\
+       }";
+
+
+    sheet.insertRule(rule);
+    item.style.webkitAnimation = name + " 700ms alternate infinite";
+    item.style.webkitAnimationPlayState = "paused";
+    item.querySelector('a').style.webkitTransition = '-webkit-transform 500ms ease-in-out';
+    item.addEventListener('webkitAnimationIteration', function(e){
+      item.style.webkitAnimationPlayState = 'paused';
+    });
+  });
+
+  this.button.style.webkitTransition = "-webkit-transform 100ms linear";
+  if(this.button.ontouchstart !== undefined){
+    this.button.addEventListener('touchstart', function(e){
+      e.stopPropagation();
+      e.preventDefault();
+      menu.toggle();
+    });
+    this.button.addEventListener('touchmove', function(e){
+      e.stopPropagation();
+      e.preventDefault();
+    });
+    this.button.addEventListener('touchend', function(e){
+      e.stopPropagation();
+      e.preventDefault();
+    });
+
+  }else{
+    this.button.addEventListener('mousedown', function(){
+      menu.toggle();
+    })
+  }
+
+  this.button.addEventListener('click', function(e){
+    e.preventDefault();
+  });
+
+  var links = this.node.querySelectorAll('li a');
+  for (var i=0; i < links.length; i++) {
+    links[i].addEventListener('click', function(e){
+      e.preventDefault();
+    })
+  };
+
+}
+
+Menu.prototype.toggle = function(){
+  this.open = !this.open;
+  if(this.open){
+    this.button.style.webkitTransform = 'rotate(-45deg)';
+  } else {
+    this.button.style.webkitTransform = 'rotate(0deg)';
+  }
+  this.eachItem(function(item){
+    item.style.webkitAnimationPlayState = 'running';
+    var link = item.querySelector('a');
+    link.style.webkitTransform = this.open ? 'rotate(-360deg)' : "rotate(360deg)" ;
+  });
+
+}
+
+Menu.prototype.eachItem = function(callback){
+  Array.prototype.forEach.call(this.menu_items, callback, this);
+}
+
+Menu.degreeToRadian = function(degree){
+  // radians  = (180/Pi) / degrees
+  degree = degree == 0 ? 360 : degree;
+  var rad =  (Math.PI/180) * degree;
+  return rad;
+}
+
+Menu.radianToPosition = function(radian){
+  return {
+    x: Math.cos(radian),
+    y: Math.sin(radian)
+  }
+}
+
+Menu.degreeToPosition = function(degree){
+  return Menu.radianToPosition(Menu.degreeToRadian(degree));
+}
+
diff --git a/style.css b/style.css
@@ -0,0 +1,100 @@
+body {
+    font-size: 12px;
+    font-family: "Helvetica Neue", HelveticaNeue, Helvetica;
+    background:-webkit-linear-gradient(hsla(0,50%,99%,1.0), hsla(0,50%,95%,1.0));
+    margin: 0;
+}
+
+#app {
+    position:absolute;
+    top:0;
+    bottom:0;
+    right:0;
+    left:0;
+    overflow:scroll;
+    -webkit-overflow-scrolling: touch;
+    background: url(texture.jpg);
+    padding: 20px;
+    color: #FFF;
+    line-height: 1.5;
+    font-size: 16px;
+}
+
+@media screen and (-webkit-device-pixel-ratio:2) {    
+    #app {
+        background: url(wood@2x.jpg);
+    }
+}
+
+@media screen and (-webkit-device-pixel-ratio:1) and (max-device-width:480px) {
+    #app {
+        background: url(wood.jpg);
+    }
+}
+
+nav {
+    position:fixed;
+    bottom: 30px;
+    left: 30px;
+    background:#F00;
+}
+
+a {
+    -webkit-tap-highlight-color:hsla(0,0%,0%,0.0);
+}
+
+nav > a {
+    position: absolute;
+    width: 40px;
+    height: 40px;
+    background: #F00;
+    background: -webkit-linear-gradient(hsla(0,100%,50%,1.0), hsla(0,100%,43%,1.0) 50%, hsla(0,100%,37%,1.0) 50%, hsla(0,100%,30%,1.0));
+    bottom: -23px;
+    left: -23px;
+    z-index: 2;
+    border-radius:40px;
+    font-size: 38px;
+    font-weight:bold;
+    font-family: "Helvetica Neue", HelveticaNeue;
+    text-align:center;
+    line-height:30px;
+    color:#FFF;
+    text-decoration:none;
+    border:3px solid #FFF;
+    -webkit-box-shadow: 0 0 2px hsla(0,0%,0%,0.6);
+}
+
+nav ul {
+    padding:0;
+    margin:0;
+    list-style-type:none;
+}
+
+nav li {
+    position:absolute;
+    left:-16px;
+    top:-16px;
+}
+
+nav li a {
+    font-size: 18px;
+    font-weight:bold;
+    border: 3px solid #FFF;
+    box-shadow: inset 0 0 4px hsla(0,0%,0%,1.0), 0 0 2px hsla(0,0%,0%,0.6);
+    text-shadow: 0 0 2px hsla(0,0%,0%,1.0);
+    width: 26px;
+    height: 26px;
+    background:#444;
+    position: absolute;
+    top:0;
+    left:0;
+    overflow:hidden;
+    color:#FFF;
+    border-radius:26px;
+    line-height: 24px;
+    text-align: center;
+    text-decoration:none;
+    font-weight:bold;
+    -webkit-animation: bounce 1s;
+}
+
diff --git a/texture.jpg b/texture.jpg
diff --git a/wood.jpg b/wood.jpg
diff --git a/wood@2x.jpg b/wood@2x.jpg