Radial Menu

A knock-off of the menu in the native iOS and Android Path apps. Works great in WebKit browsers (desktop and iOS) and does ok on Firefox.

Here’s one that goes full circle just for fun:

How it works

HTML markup is kept simple:

<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>

The CSS takes care of the rounded corners, gradient fills, drop-shadows and initial positioning of all the elements.

JavaScript is used to determine the “open” position of each element and generates the necessary animations using @-webkit-keyframes. This allows the menu to adapt to how many elements are in it.

There are three options to configure the menu:

// 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  
})