<nav class="circular-menu">

  <input type="checkbox" name="menu" value="open" id="menu_open" />
  <div class="circle">
    <a href="" class="fa fa-plus-circle fa-2x" title="Add another icon"></a>
    <a href="" class="fa fa-windows fa-2x"></a>
    <a href="" class="fa fa-facebook fa-2x"></a>
    <a href="" class="fa fa-twitter fa-2x"></a>
  </div>
  
  <label for="menu_open" class="menu-button fa fa-bars fa-2x"></label>
</nav>

@import "compass/css3";

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

body {
  background: #39D;
}

.circular-menu {
  padding: 30px;
  width: 250px;
  height: 250px;
  margin: 0 auto;
  position: relative;
  
  > input {
    display: none;
    
    &:checked ~ div.circle {
      opacity: 1;

      -webkit-transform: scale(1);
      -moz-transform: scale(1);
      transform: scale(1);
    }
  }
  
  .circle {
    $circleDiameter: 250px;
    $circleRadius: $circleDiameter / 2;
    
    width: $circleDiameter;
    height: $circleDiameter;
    opacity: 0;

    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    transform: scale(0);

    -webkit-transition: all 0.4s ease-out;
    -moz-transition: all 0.4s ease-out;
    transition: all 0.4s ease-out;
    
    a {
      text-decoration: none;
      color: white;
      display: block;
      height: 40px;
      width: 40px;
      line-height: 40px;
      margin-left: -20px;
      margin-top: -20px;
      position: absolute;
      text-align: center;
      @include user-select(none);
      cursor: pointer;

      &:hover {
        color: #ddd;
      }
    }
    
    @for $numerOfLinks from 3 through 25 
    {
      /* http://stackoverflow.com/a/10152437/468214 */
      
      a:first-child:nth-last-child(#{$numerOfLinks}),
      a:first-child:nth-last-child(#{$numerOfLinks}) ~ a {
        $angle: 0;
        $step: (2 * pi()) / $numerOfLinks;

        @for $linkIndex from 0 through $numerOfLinks {
          &:nth-child(#{$linkIndex}) 
          {
            left: $circleRadius + ($circleRadius * cos($angle));
            top: $circleRadius + ($circleRadius * sin($angle));
          }
          
          $angle: $angle + $step;
        }
      }
    }
  }
  
  .menu-button {
    position: absolute;
    top: calc(50% - 30px);
    left: calc(50% - 30px);
    text-decoration: none;
    text-align: center;
    color: #444;
    border-radius: 50%;
    display: block;
    height: 40px;
    width: 40px;
    line-height: 40px;
    padding: 10px;
    background: #fff;
    @include user-select(none);
    cursor: pointer;
    
    &:hover {
      background-color: #ddd;
    }
  }

}

// THIS IS ONLY HERE TO ADD ICONS BY CLICKING THE +
// DEOES NOT MAKE THE MENU FUNCTION OR PERFORM LAYOUT
var iconsAr = [
  'fa-linkedin', 
  'fa-github', 
  'fa-rss', 
  'fa-pinterest', 
  'fa-asterisk'];  

$(document).on("click", ".fa-plus-circle", function(e) {
  e.preventDefault();
  $this = $(this);
  
  var randomIcon = iconsAr[Math.floor(Math.random() * iconsAr.length)];
  
  $this.parent().append("<a href='' class='fa " + randomIcon + " fa-2x'></a>");
})