<header>Welcome</header>
<div id="container" class="entypo-menu">
  <a href="" class="entypo-chat">CHAT</a>
  <a href="" class="entypo-mail">RAIL</a>
  <a href="" class="entypo-user">USER</a>
  <a href="" class="entypo-code">CODE</a>
  <a href="" class="entypo-home">HOME</a>
</div>

<!-- 

Adding more links will cause it to automatically adjust its size and position. WORK IN PROGRESS!

-->

@import url(http://weloveiconfonts.com/api/?family=entypo);
@import url(https://fonts.googleapis.com/css?family=Mr+Dafoe);

[class*="entypo-"]:before {
  font-family: 'entypo', sans-serif;
}

body {
  margin: 0;
  background: #6EA39B;
}

header {
  height: 150px;
  background: #262626;
  font-family: 'Mr Dafoe';
  font-size: 75px;
  color: #EBEAE8;
  text-align: center;
  line-height: 150px;
}

#container:before {
  position: absolute;
  top: 0; left: 0;
  width: 50px;
  height: 50px;
  background: #262626;
  cursor: pointer;
  text-align: center;
  line-height: 50px;
  color: #EBEAE8;
}

#container {
  position: absolute;
  margin: auto;
  top: 150px; left: 0; right: 0;
  width: 50px;
  height: 50px;
  cursor: pointer;
  text-align: center;
}

#container > a {
  position: absolute;
  display: block;
  width: 50px;
  height: 50px;
  background: #3A3A3A;
  -webkit-transition: top .5s, left .5s;
  -moz-transition: top .5s, left .5s;
  text-align: center;
  text-decoration: none;
  line-height: 50px;
  color: #EBEAE8;
  z-index: -1;
}

var isOn = false;

$('#container').click(function() {
  if(isOn) {
    reset();
  } else {
    setPosition();
  }
});

function setPosition() {
  isOn = true;
  var links = $('#container a');
  var radius = (links.length * links.width()) / 2;
  var degree = Math.PI / links.length, angle = degree / 2;
  
  links.each(function() {
    var x = Math.round(radius * Math.cos(angle));
    var y = Math.round(radius * Math.sin(angle));
    
    $(this).css({
      left: x + 'px',
      top: y + 'px'
    });
    
    if(window.console) {
      console.log(x, y);
    }
    
    angle += degree;
  });
}

function reset() {
  $('#container a').css({
    left: 0 + 'px',
    top: 0 + 'px'
  });
  
  isOn = false;
}