How to create a radial menu in CSS?

Question

How do I create a menu which looks like so:

Link to PSD

I don\'t want to use t

Answer 1

Another very good way would be to use JavaScript for the positioning.

DEMO + TUTORIAL on making an animated radial menu

A pro to this method is that you can use any number of elements and it will keep positioning them radially, without having to change any of your CSS.

The JavaScript in question is:

var items = document.querySelectorAll('.circle a');

for(var i = 0, l = items.length; i < l; i++) {
  items[i].style.left = (50 - 35*Math.cos(-0.5 * Math.PI - 2*(1/l)*i*Math.PI)).toFixed(4) + "%";

  items[i].style.top = (50 + 35*Math.sin(-0.5 * Math.PI - 2*(1/l)*i*Math.PI)).toFixed(4) + "%";
}

document.querySelector('.menu-button').onclick = function(e) {
   e.preventDefault(); document.querySelector('.circle').classList.toggle('open');
}