http://designbored.herokuapp.com/#circle-menu

html_circle-menu.html

<div id="menu-container">
  <button id="menu-button"><i class="icon-list"></i></button>
  
  <nav id="menu">
    <a href="#"><i class="icon-magnet"></i></a>
    <a href="#"><i class="icon-user"></i></a>
    <a href="#"><i class="icon-gamepad"></i></a>
    <a href="#"><i class="icon-map-marker"></i></a>
    <a href="#"><i class="icon-legal"></i></a>
    <a href="#"><i class="icon-cogs"></i></a>
  </nav>
</div>

js_circle-menu.js

<script type="text/javascript">$(function() {
  $('button#menu-button').click(function(){
    $('nav#menu').toggleClass('visible')
  })
});</script>

style_circle-menu.css

#menu-container {
  position: relative;
  width: 150px;
  height: 150px;
  margin: auto;
}

#menu-container nav#menu {
  opacity: 0;
  -webkit-transition: opacity 0.3s ease-in;
  -moz-transition: opacity 0.3s ease-in;
  -o-transition: opacity 0.3s ease-in;
  transition: opacity 0.3s ease-in;
  position: relative;
  width: 150px;
  height: 150px;
  padding: 0;
  border-radius: 50%;
  list-style: none;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}

#menu-container nav#menu > * {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50px;
  height: 50px;
  margin: -25px;
}

#menu-container nav#menu > *:nth-of-type(1) {
  -webkit-transform: rotate(0deg) translate(75px) rotate(-0deg);
  -moz-transform: rotate(0deg) translate(75px) rotate(-0deg);
  -ms-transform: rotate(0deg) translate(75px) rotate(-0deg);
  -o-transform: rotate(0deg) translate(75px) rotate(-0deg);
  transform: rotate(0deg) translate(75px) rotate(-0deg);
}

#menu-container nav#menu > *:nth-of-type(2) {
  -webkit-transform: rotate(60deg) translate(75px) rotate(-60deg);
  -moz-transform: rotate(60deg) translate(75px) rotate(-60deg);
  -ms-transform: rotate(60deg) translate(75px) rotate(-60deg);
  -o-transform: rotate(60deg) translate(75px) rotate(-60deg);
  transform: rotate(60deg) translate(75px) rotate(-60deg);
}

#menu-container nav#menu > *:nth-of-type(3) {
  -webkit-transform: rotate(120deg) translate(75px) rotate(-120deg);
  -moz-transform: rotate(120deg) translate(75px) rotate(-120deg);
  -ms-transform: rotate(120deg) translate(75px) rotate(-120deg);
  -o-transform: rotate(120deg) translate(75px) rotate(-120deg);
  transform: rotate(120deg) translate(75px) rotate(-120deg);
}

#menu-container nav#menu > *:nth-of-type(4) {
  -webkit-transform: rotate(180deg) translate(75px) rotate(-180deg);
  -moz-transform: rotate(180deg) translate(75px) rotate(-180deg);
  -ms-transform: rotate(180deg) translate(75px) rotate(-180deg);
  -o-transform: rotate(180deg) translate(75px) rotate(-180deg);
  transform: rotate(180deg) translate(75px) rotate(-180deg);
}

#menu-container nav#menu > *:nth-of-type(5) {
  -webkit-transform: rotate(240deg) translate(75px) rotate(-240deg);
  -moz-transform: rotate(240deg) translate(75px) rotate(-240deg);
  -ms-transform: rotate(240deg) translate(75px) rotate(-240deg);
  -o-transform: rotate(240deg) translate(75px) rotate(-240deg);
  transform: rotate(240deg) translate(75px) rotate(-240deg);
}

#menu-container nav#menu > *:nth-of-type(6) {
  -webkit-transform: rotate(300deg) translate(75px) rotate(-300deg);
  -moz-transform: rotate(300deg) translate(75px) rotate(-300deg);
  -ms-transform: rotate(300deg) translate(75px) rotate(-300deg);
  -o-transform: rotate(300deg) translate(75px) rotate(-300deg);
  transform: rotate(300deg) translate(75px) rotate(-300deg);
}

#menu-container nav#menu > *:nth-of-type(7) {
  -webkit-transform: rotate(360deg) translate(75px) rotate(-360deg);
  -moz-transform: rotate(360deg) translate(75px) rotate(-360deg);
  -ms-transform: rotate(360deg) translate(75px) rotate(-360deg);
  -o-transform: rotate(360deg) translate(75px) rotate(-360deg);
  transform: rotate(360deg) translate(75px) rotate(-360deg);
}

#menu-container nav#menu.visible {
  opacity: 1;
  -webkit-transition: opacity 0.5s ease-out;
  -moz-transition: opacity 0.5s ease-out;
  -o-transition: opacity 0.5s ease-out;
  transition: opacity 0.5s ease-out;
}

#menu-container a, #circle-menu #menu-container button {
  width: 50px;
  height: 50px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  background-color: orange;
  font-size: 20px;
  text-align: center;
}

#menu-container a i, #circle-menu #menu-container button i {
  line-height: 50px;
}

#menu-container a {
  color: #333333;
}

#menu-container a:hover {
  color: #4183c4;
}

#menu-container button {
  z-index: 100;
  position: absolute;
  left: 50%;
  margin-left: -25px;
  top: 50%;
  margin-top: -25px;
  border: 0;
  cursor: pointer;
  color: #333333;
  outline: none;
}

#menu-container button:hover {
  color: #4183c4;
}

style_circle-menu.sass

@mixin putOnCircle( $nb-items, $circle-size, $item-size, $class-for-IE: false )
  $half-item:     $item-size / 2
  $half-parent: $circle-size / 2
  
  position: relative
  width:  $circle-size
  height: $circle-size
  padding: 0
  border-radius: 50%
  list-style: none
  +box-sizing(content-box)
  
  // In my example could be just: s
  > *
    display: block
    position: absolute
    top:  50%
    left: 50%
    width:  $item-size
    height: $item-size
    margin: -$half-item
  
    $angle: 360 / $nb-items
    $rot: 0
    @for $i from 1 through $nb-items+1
      // If no support for IE8-
      @if $class-for-IE == false
        &:nth-of-type(#{$i})
          +transform(rotate(#{$rot}deg) translate($half-parent) rotate(-#{$rot}deg))
        // If support for IE8-  
      @else
        &.#{$class-for-IE}#{$i}
          // If CSS transforms are not supported
          $mt: sin($rot * pi() / 180) * $half-parent - $half-item
          $ml: cos($rot * pi() / 180) * $half-parent - $half-item
          margin: $mt 0 0 $ml
      $rot: $rot + $angle

#circle-menu
  #menu-container
    $sphere-size: 50px
    position: relative
    width: $sphere-size*3
    height: $sphere-size*3
    margin: auto

    nav#menu
      opacity: 0
      +single-transition(opacity, 0.3s, ease-in)
      +putOnCircle(6, $sphere-size*3, $sphere-size, false)
      &.visible
        opacity: 1
        +single-transition(opacity, 0.5s, ease-out)
    a, button
      width: $sphere-size
      height: $sphere-size
      +border-radius(50%)
      background-color: orange
      font-size: 20px
      text-align: center
      i
        line-height: $sphere-size
    a
      color: #333
      &:hover
        color: $link-color
    button
      z-index: 100
      position: absolute
      left: 50%
      margin-left: -$sphere-size/2
      top: 50%
      margin-top: -$sphere-size/2
      border: 0
      cursor: pointer
      color: #333
      outline: none
      &:hover
        color: $link-color