A CodePen by Ludovic Chenneberg. CSL_IteractiveMenu v1.0

script.coffee

class CSLMenu
  elMenu: null
  width: 200
  height: 200
  totalArcAngle: -1 * Math.PI / 2
  radius1: .5
  radius2: .75
  btnWidth: 20
  btnHeight: 20
  itemButtons: new Array()
  isVisible: false
  delay: .2
  
    
  constructor: ->
    @elMenu = document.createElement("DIV")
    @elMenu.id = "CSLMenu"
    @elMenu.style.width = @width + "px"
    @elMenu.style.height = @height + "px"
    @elMenu.style.position = "absolute"
    @elMenu.style.left = "110px"
    @elMenu.style.bottom = "10px"
    @addInteractiveButton()
    document.body.appendChild(@elMenu)
    
  addInteractiveButton: () ->
    btn = new CSLMenuItemButton("IButton", ->) 
    btn.setCoords(0, @height)
    $("body").on "mouseup", $.proxy(@onInteractiveButtonClicked, @)
    @elMenu.appendChild(btn.el)
  
  onInteractiveButtonClicked: (e) ->
    @toggleVisibility()
    
    
  toggleVisibility: () ->
    if @isVisible
      @disappear()
    else
      @appear()
    @isVisible = !@isVisible
      
  setTotalArcAngle: (angle) ->
    @totalArcAngle = angle
    @appear()
     
  getRadiusWithRadiusPercentage: (radius) ->
    radius * @width
  
  appear: ->
    i = 0
    for button in @itemButtons
      coords = @getItemCoordinates(i, @radius1)
      button.el.style.left = coords.x+"px"
      button.el.style.top =  (coords.y - button.height) + "px"
      button.el.style.opacity = 1
      delay = (@delay * i) + "s"
      $(button.el).css
        "transition-delay": delay
        "-moz-transition-delay": delay
        "-webkit-transition-delay": delay
        "-o-transition-delay": delay
      i++
      
  disappear: ->
    i = 0
    for button in @itemButtons
      coords = @getItemCoordinates(i, @radius2)
      button.el.style.left = coords.x+"px"
      button.el.style.top =  (coords.y - button.height) + "px"
      button.el.style.opacity = 0
      i++
      
  addNewButton: (id, callback) ->
    itemButton = new CSLMenuItemButton(id, callback) 
    itemButton.setCoords(0, @height)
    @itemButtons.push(itemButton)
    
    @elMenu.appendChild(itemButton.el)
    if callback then callback()
  
  getRotateAnglePerItem: () ->
    @totalArcAngle / (@itemButtons.length - 1)
  getRotateAngleForItemAtPosition: (position) ->
    position * @getRotateAnglePerItem()
    
  getCircleOrigin: () ->
    x = @elMenu.offsetLeft
    y = @elMenu.offsetHeight
    {x:x, y:y}
  
  getItemCoordinates: (position, radius) ->
    angle = @getRotateAngleForItemAtPosition(position) 
    pX = Math.cos(angle) * @getRadiusWithRadiusPercentage(radius)
    pY = @height + Math.sin(angle) * @getRadiusWithRadiusPercentage(radius)
    #alert pX + " " + pY
    {x:pX, y:pY}

class CSLMenuItemButton
  el: null
  x: 0
  y: 0
  width: 20
  height: 20
  imagePath: null
  labelText: null
  parent: null
  childs: new Array()
  constructor: (id, callback)->
    @el = document.createElement("button")
    $(@el).addClass "cslMenuItem"
    @el.setAttribute("id", id)
    @el.style.position = "absolute"
    @el.style.width = @width+"px"
    @el.style.height = @height+"px"
    @el.style.backgroundColor = "#444444"
    @el.style.borderRadius = (@width / 2)+"px"
    @setCoords(@x, @y)
  
  addSubButton: (button) ->
    button.parent = @
    @childs.push button
  
  setCoords: (x, y) ->
    @x = x
    @y = y
    @el.style.left = @x+"px"
    @el.style.top = (@y-@height)+"px"
  getOrigin: () ->
    x = @el.style.left + @width / 2
    y = @el.style.bottom + @height / 2
    {x:x, y:y}
      
$(document).ready ->
  cslMenu = new CSLMenu()
  cslMenu.addNewButton("test")
  cslMenu.addNewButton("test2")
  cslMenu.addNewButton("test3")
  cslMenu.addNewButton("test4")
  cslMenu.addNewButton("test5")
  cslMenu.addNewButton("test6")

style.sass

@import "compass"
@import compass/css3

body
  width: 100%
  height: 100%

#CSLMenu
  position: absolute
  //background-color: #000

button
  +transition-property(all)
  +transition-duration(1s)
  perspective: 1000
  transform-style: preserve-3d
  transition: all 1.0s ease-out
  box-shadow: 0 0 8px #888
  backface-visibility: hidden
  border: none