how to make an interactive button that creates a semicircle around it when clicked

var items = document.querySelectorAll('.menuItem');

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('.center').onclick = function(e) {
   e.preventDefault(); document.querySelector('.circle').classList.toggle('open');
}

@import "https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css";

body {
  /* Image source: http://wallbase.cc/wallpaper/718405 */
  /* Excuse the base64 mess, imgur blocked the hotlinked image and this seemed like the fastest solution */
  background: cornflowerblue url(" data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAAoCAYAAABOzvzpAAAACXBIWXMAAAsTAAALEwEAmpwYAAAOlUlEQVRo3k2aTWLj2o6DP5BHTt7dUk97C73/dbyySPSAlOoOXE7slC3+gQCO9L//839WiAyICDIAQYQAw/7bbtrmbmM35cKe9+Um1USYC8goroSfNJ+E3zS/R/xm83uJ/xzzk+L3Ej8h8ogTQhGgxErK4tahHHw7uB18ndwt7t5nB98W1eLr5Ntwd3Dv89dwF/xp+N7mW1DdfKupbm6bg5ggJDIEMplBaF5DYBuTNCa7KYss0RgoQKSCAI6KDHFlcG0iriu40nyu5OfAzxE/F/wc+JwgM0iJiAm+lYhATuTAJGERHciHaBP9vDYJiA5OiT/7c7ahgwjjalCADCW8RU2bI4Q0AQNkwBFkBhIQML1guk0HtE0f0Z4UYCGZxKTgRPBJuAI+F/wE/Fzm9yN+Uvxc5ucEP5e4TnBC831PAkhugiCRDmFx+6AS4ZiKtzj+W+1T8O0gS5yG7y3U5k8JqSd4hGkssAK3OZKImGor4ESSR0SIE0xiNjlGNHrHwZ7fcSCKkEnESfNJ8xPB75lK/17wc03b/x74/QSfA5+T5AkingQERZA6kwQdqoN0khbVQXdwtWYMin0W15sEc46IG1SQZfydJFiapsVY5iiEEAoTEURChjgJmRpcEBCeUZDBmgTQ2IGp+QxMhDnUVPrM7P8c83vB7xX8c8HPJ2b+ryQzOGeCV4hWcnQoklCSToqkHFwWd8cmYVq/ip3tScK5TZb4cxul0N389xZW0cV2gDDG3RzgnfcjkZFkmJOxDyYpGnwwYG0y2A+ygCYEgfnE4aT5SfjJ5vcj/rnEf66p/O9ngv+c4DpBpKb6eS0GBMEhCIpDMV1hB1cH1dAdVIlquO4Bu/ue9j9fEzfE1yjBaYigvk073uvu7hkBaaoeoWnjgCuCE/A5cHLfC5AmAcj7Yc07IIsDEYP+V5qfPPxzwe9H/H6mC34/E/i1GBBxUB6IoHXRoU1Akjo0QTsoJ23RPY+qSUTf5s8tqpr8isiGb8zzH9MyprgxRdOIFOTdnNjZDyAFIXMiudJzgdsFJ3ixQTKOnSNyAEYGm1CTYT5hrtSg/hVv8D+X+PwkPyc4R+Q5RARk4siZeSVSInYlMkkIC3uSQZuqoMtUibzhviEO6GtI4NsUcKsoki/FZVMOWpOIowWuB+zOPlLNRfBR84ngXNpOgMhAyxfe4DWNpQhSnqTJE/AFPyf5/IjPlVxXkEfkSTITZaIIrIM3+FKguCgCKWmmdXHQTtwitwPqNllP4MYJDmPMTfMlOPRiiElDMCv0BJqPlgiaJEiagziYT4hPajoigzyQCRG7ImP36wJlYCJ2nSZcR3yOuK7gc4lzJXnN2sszgUcu0CgwByQizv4eOGYdAnOFnte7oEvoAPd0qQNKTWNuDXs5btJFlIZDlKeTjzhoZjfMgOA0NcdwwSRBzYfgE81JkftQMo8IJEMMnijYJHj2/BHniOtK8iQxLYYzUM7el4SVvB+gwJqRa2lmVElsmXDMd1eghkiRaSpmjKXpmSyTXaiEqolqdBpZQ9zCnuIhwhA2Z0foYC6Ly+ZD85G4BNdDnVPoTMWds0rRJCYCInK65YiTuWv1SdJUvD2/24Fnw+JYEi5oAxLWLNqOINgOaAYret4DvxNJFyqjY7gH4CIKEpQHVaGacUcbuNpkBGGTFtlw3ByLC/Nx8EFc8m4NzwrNGYuOoZ4cIIZJxgkytlrn4fvM7vCsX7c24F7dIVBTPZ9jD9/oNDSUnkQNIDZB5zBS97ZvBb6LPoMJysIHfC+XUUOII7zV99sB0ZDVQ1FbnG5O7Uw3XA7SxXFMRXc9EhMkiw+ceWOKnfM3QCNiA6GM3MMtiOEV6gEyTOfQUUdhC0dPUmRay04lOqEcVHsIUkKfwN8JvL/QAcQywkgcng4Ig2zCQobsTYRFtjk9r2U/u3PZoptwkH74ds68Ahp2hXe7yD0VkmeFkStJVnE6lmlOa/Q3IA9d94xEQrdwBGQNmwtvIszt5JaoEBWmQ3SYyuZW0DGCqBV4V2Abzo7tgEJP68smOoiCSBM1AWctvfSAS5yc16JQBwqjFpzVCTYhDVOMmXHa4FGW06/7fvc8yzTCOnTXBC/RKZw1zzWqzTGBtUaZlsVtuAluwS1oJS3TCkqmFNSqXEKcGcYeprfDuawXtQc9QwMeNcnQvR/wnawqNG1UDEkyuDf4EL0D79jhVW8ypgHc2wsexdYE0O+sd0A1uKAWcInAR9MZW9Un+ELcMjfwlSiJW+KLZmwkClEetot6kJb2CqNX5q8bAq5p32k70QqkXs9AA2iXX9nZ14xb17RjeAIgNtAO8CbLj+cwr09eiputeg/N7bjpFFUFqQHLFh1FC5rgbvPHpmy+G8a9SbUWR/CMquBQf70CembW7/MQjWIAp0LcN+SDojvjotE1u1tsQIg6q8Htv+tssQAaE6sj5qLwAKSfZ0zfU81WUQ3lnhnuGtzomCRF0HhdII9TtIlo4PZo1hLU6ntLnNlJs2dH8rJ8e8RO185NQd2vNcDZVSZDtJ4yDgZ4wM0zwJBCziEXzHqUBnBZ5B8K5l2LLB5MIu0ZgZJpmltFe80N34M3URvc4e5e68x8be6edPvpOESvn3XwtPQrbxu6oaVZKQruMikh6a1MYaJF7CZgiYy8DpGXor4secYrkmm5HTvtw8t87KGRst4lYZ71yV5Tg5tSbccUjqC0AFjiu1K5q3c1ejuiKXqSYHPc2rmcNdMJt4eMfHsETUSgmnXzoG14NEQssmsDHDY2P2mcPUIizgR6Fg9QoNSbBPbv3SIUM9sGalRgjY/12rRtcJlmRqFclMyNqBJdyV0TePdo/yFUY+p2D+adN3DNnJyedfEnRi39V0Y1XVI1X5BAMrw1ckZI3iQsx54tI47GcEkFR1A95ChzWKFiEhAKOsTVWjCDbM0+7/H3HugZH7JXEJl2LaqbZgyTu3oMk2q6wV3bDTXF9pg7p4c1EoZE3Dbp4NtDc3GMdXTDJ/+2/EOecBBqtAConeqDSQ3wXLtXta29wnmrP37gPLQ+QxA9ai8DykL3jJwk9GAW3k3SdPWMiGtm/p7/X/dQ6qqi23g74umG450rxbS15A1sqtqGdnB79mz2yOZp78FvjZpBNKmxyG8NyfisklPMWnTP9+Ra6W8CMl/QA5ERwxt6PL66IDYJsfP7gI49/l7Tc71beX93TMpUj5Hb3eNmPwm4V7sU8PWDOLvLLa4uSsnpILRa35otuAkYOTIafmTw0OWOg8v87EUMgzMeNoJ6KszihCQKCAX2BrqyIhefRmYEUUNnl0cPEFp0Fa7HMtv5v4eYzThsx9jcmFN7AbxnQLGKzHwIilGEqQk8GLHEkr/wgFpaRHmDnysdGh2DHT3z5mmpIVc9CY+HFeauxz2oiXWsYwuiHiMjvLKbGu3c2lGdJLvB9zDQvoehdnnp9nzv2PrmVOv199rPqcmsxHKvNblmJxNwxijIZ73NCc2Iv/MEVhB3kRHct7lOD5co4TQuTzn7sdQaK15lqe3GYPyC2OM6rYTWMq5Bggmsn+CH/uF7V/peU7+A2C8nOA8Lvj2o3evy38Nfpk00nmFoTn7e9baW+ho8wx69emLl9ekmO+bLb+Fs6happpWUCrbNl57N+eCrEocmD8HiLzd/GOQztj0uT3dt9TXzfkPVJMD+S4aeg53Ter50ZrdXnXnnr5ZGzuwlicdG11Qn97Qod2webjfkI7mryBT3dzqnvmNNF0KPOGjTp4g21pgbvdK1hxcvcP0VTKue/oqp3qBK9DNi1fPscY6fBHRPzEVzeht+7KdprdIyP1gG6N3lo/NDf4/Nziq+h62NWRUcz0WXRd3NLZFf8ZV3be7cuvEF6kRn9EV34zAFw97QOj9byR5+39Zuqdlarq1u97b+YEKXFyPqdZ/aDQ5OEbDzrQ28l3MrcppN48JN1ecgtVcPOP6eLoe0qxJueVxYRjxFTdunmBNfF74G3Y9BB6JibKuO6YSooeKGVo/TY+aIvllTY3/2rsCHyvez8qYj2j2b6FWfLBVW75ncgEEvJZWHH3fEkpsxFhIPa5PekdQalo+5Wnv4MLx9DjCfLmLP5NpBdXHOsr7HwKzH229KY32Vgu/D8qw3Eb0cv4F7OUY9Z5b9BLmAV6NEzWyHOc4zB40FWzEgMrR8FdtCUUTQOdV0zFo667BMshYkPeNz70r8698ykPm251T9quCunrOGnt1OTje4YsZApnVTkYNHK4nLczo854QrnXdEukev9BKkFycfvHho9HIgOnaGHnPjAdyd/16O/1T9ENyrIqftH0M1uHvOF28NFdZmul17sDkq87T5nubqcZ+jTWQQxwOGueZLmFuxys97UizuZbCejUuV+NZSDK8ueJnsdBwe222Y49h4Z6T78NRxZueYe05lxit87bEI1OKbc2giz/qUphLvCdPu6xkhvx5+2XM218G17Xuf4LTHcM2eu0BOj+jJf7k9Wp+PnWuSu3vFz/D9qapf7Y+hnnXa/ZKf14EaDPjb6o+3/bgzdvzrPqFVe8vE7jVB7zVQJQ89zmF9aEXP7t/S2vUtTvbc9NDi2JzeTrjiOQEcq7zXU8yR4qXeo3Lx3UTcC3zlSXIvjPRukBf03g3Cu0L7uUVmlfjaVo8QClp+zKO3E+jx5QNzL5Mq9Sq9FVLP6Y7X0Q2NI7vcf3z7UWL1r8elnlFinCRF44xZi7nOFOJW75H5sNWqeOVtvetxtsK0+3M/wzP/bMk1GPAebq7E9O42r+S1h5kNURlwKWZ2O8YzVM1nxJqq7xfufQQFfEN7PM2r3Ydseezr25z1nMKgXJ4Qo0ifLhiStH6fg3o8yH+1d/+78vwNnvUx1A0FR3vs9DCZ0ekNe4fW698/tlmPO1zbN7SXq/fgwzrKuYZpi/fmqdy2rnzMz353xFjTgzu5p0PB3MzUvfejadZ10VRoZ/25gWtI0d+7VvgXlX4MlL+z7+U9/w/sgwZKH+EVWgAAAABJRU5ErkJggg==") no-repeat fixed;
  background-size: cover;
}

a {
  font-size: 14px;
  text-decoration: none;
  outline: 0;
}

.circle,
.ring {
  height: 256px;
  position: relative;
  width: 256px;
}

.circle {
  margin: 0 auto;
}

.ring {
  background-color: rgba(0,0,0,0.5);
  border-radius: 50%;
  opacity: 0;

  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  transform-origin: 50% 50%;

  -webkit-transform: scale(0.1) rotate(-270deg);
  -moz-transform: scale(0.1) rotate(-270deg);
  -transform: scale(0.1) rotate(-270deg);

  -webkit-transition: all 0.4s ease-out;
  -moz-transition: all 0.4s ease-out;
  transition: all 0.4s ease-out;
}

.open .ring {
  opacity: 1;
  
  -webkit-transform: scale(1) rotate(0);
  -moz-transform: scale(1) rotate(0);
  transform: scale(1) rotate(0);
}

.center {
  background-color: rgba(255,255,255,0.3);
  border-radius: 50%;
  border: 2px solid #ffffff;
  bottom: 0;
  color: white;
  height: 80px;
  left: 0;
  line-height: 80px;
  margin: auto;
  position: absolute;
  right: 0;
  text-align: center;
  top: 0;
  width: 80px;
  
  -webkit-transition: all 0.4s ease-out;
  -moz-transition: all 0.4s ease-out;
  transition: all 0.4s ease-out;
}

.open .center {
  border-color: #aaaaaa;
}

.menuItem {
  border-radius: 50%;
  color: #eeeeee;
  display: block;
  height: 40px;
  line-height: 40px;
  margin-left: -20px;
  margin-top: -20px;
  position: absolute;
  text-align: center;
  width: 40px;
}

<div class="circle">
  <div class="ring">
    <a href="" class="menuItem fa fa-home fa-2x"></a>
    <a href="" class="menuItem fa fa-comment fa-2x"></a>
    <a href="" class="menuItem fa fa-play fa-2x"></a>
    <a href="" class="menuItem fa fa-camera fa-2x"></a>
    <a href="" class="menuItem fa fa-music fa-2x"></a>
    <a href="" class="menuItem fa fa-user fa-2x"></a>
    <a href="" class="menuItem fa fa-trash-o fa-2x"></a>
    <a href="" class="menuItem fa fa-star fa-2x"></a>
  </div>
  <a href="#" class="center fa fa-th fa-2x"></a>
</div>