Demo: http://sparanoid.com/lab/path-menu/ Dribbble page: http://drbl.in/cwcK

index.html

<div id="testfield" class="span16">
  <div class="flyout-wrap">
    <a class="flyout-btn" href="#" title="Toggle"><span>Flyout Menu Toggle</span></a>
    <ul class="flyout flyout-init">
      <li><a href="#"><span>Item</span></a></li>
      <li><a href="#"><span>Item</span></a></li>
      <li><a href="#"><span>Item</span></a></li>
      <li><a href="#"><span>Item</span></a></li>
      <li><a href="#"><span>Item</span></a></li>
      <li><a href="#"><span>Item</span></a></li>
    </ul><!-- .flyout -->
  </div><!-- .flyout-wrap -->

  <h1><a href="https://path.com/">Path</a> 2.0 Flyout Menu using CSS by <a href="http://sparanoid.com/">Tunghsiao Liu</a></h1>
</div><!-- #testfield -->

script.js

$(".flyout-btn").click(function() {
  $(".flyout-btn").toggleClass("btn-rotate");
  $(".flyout").find("a").removeClass();
  $(".flyout").removeClass("flyout-init fade").toggleClass("expand");
});
$(".flyout").find("a").click(function() {
  $(".flyout-btn").toggleClass("btn-rotate");
  $(".flyout").removeClass("expand").addClass("fade");
  $(this).addClass("clicked");
});

style.less

/*!
  Path 2.0 Flyout Menu using CSS
  Contributed to Path by Tunghsiao Liu
  sparanoid.com
*/
/*!
*/

* { margin: 0; padding: 0; text-decoration: none; }

:root {
  padding: 60px;
  background: #f9f4f0;
  font-family: Helvetica, 'Hiragino Sans GB', Arial, sans-serif;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-font-smoothing: antialiased;
}

@rate: 18deg;

@d1: @rate * 0;
@d2: @rate * 1;
@d3: @rate * 2;
@d4: @rate * 3;
@d5: @rate * 4;
@d6: @rate * 5;

.animation (@var) {
  -webkit-animation: @arguments;
     -moz-animation: @arguments;
      -ms-animation: @arguments;
       -o-animation: @arguments;
          animation: @arguments;
}

.animation-delay (@var) {
  -webkit-animation-delay: @arguments;
     -moz-animation-delay: @arguments;
      -ms-animation-delay: @arguments;
       -o-animation-delay: @arguments;
          animation-delay: @arguments;
}

.transform (@var) {
  -webkit-transform: @arguments;
     -moz-transform: @arguments;
      -ms-transform: @arguments;
       -o-transform: @arguments;
          transform: @arguments;
}

.transition (@var) {
  -webkit-transition: @arguments;
     -moz-transition: @arguments;
      -ms-transition: @arguments;
       -o-transition: @arguments;
          transition: @arguments;
}

#testfield {
  width: 210px;
  margin: 0 auto;
  //background: #fff;
  h1 {
    background: #f1e7de;
    border-radius: 3px;
    border: 1px solid #d3bfae;
    padding: 7px 10px;
    margin: 20px 0 10px;
    font-size: 12px;
    line-height: 1.6;
    color: #6d492a;
    text-shadow: #fff 0 1px 1px;
    box-shadow: inset #fff 0 1px 0 0;
    a {
      color: #6d492a;
      border-bottom: 1px dotted #d3bfae;
      &:hover {
        border-color: #6d492a;
      }
    }
  }
  .flyout-wrap {
    height: 191px;
    position: relative;
    .flyout {
      position: relative;
      margin: 0 0 1px 6px;
      line-height: 0;
      padding: 0; // FIXME: hotfix for codepen
      & > li {
        position: absolute;
        background: yellow;
        height: 170px;
        display: block;
        -webkit-transform-origin: 25px / 2 bottom;
           -moz-transform-origin: 25px / 2 bottom;
                transform-origin: 25px / 2 bottom;
        &:nth-of-type(1) { .transform(rotate(@d1)); }
        &:nth-of-type(2) { .transform(rotate(@d2)); }
        &:nth-of-type(3) { .transform(rotate(@d3)); }
        &:nth-of-type(4) { .transform(rotate(@d4)); }
        &:nth-of-type(5) { .transform(rotate(@d5)); }
        &:nth-of-type(6) { .transform(rotate(@d6)); }
        a {
          position: absolute;
          display: block;
          border-radius: 50%;
          height: 26px;
          width:  26px;
          border: 3px solid #fff;
          box-shadow: rgba(0, 0, 0, .4) 0 0 5px 0, rgba(0, 0, 0, .2) 0 0 0 1px, inset rgba(0, 0, 0, .5) 0 0 2px 0;
          text-indent: -99999px;
          overflow: hidden;
          background: #444;
          &:active {
            background: #000;
            border-color: #555;
            span {
              opacity: .3;
            }
          }
          span {
            display: block;
            height: 26px;
            width:  26px;
            background: url(http://sparanoid.com/lab/path-menu/star.svg) no-repeat center center;
            background-size: 16px 16px;
            // -webkit-mask-image: url(http://sparanoid.com/lab/path-menu/star.svg);
          }
        }
      }
    }

    // triggers
    // LESS doesn't support loops and parametric mixins very well,
    // a workaround solution: use Textmate
    .flyout-init li                                 { display: none; }
    .flyout.expand li a                             { .animation(expand .6s ease 1 backwards);        top: 10px; }
    .flyout li a                                    { .animation(contract .35s ease-out 1 backwards); top: 150px; }
    .flyout.fade li a.clicked                       { .animation(clicked .5s ease-out 1 forwards);    top: 10px; }
    .flyout.fade li a:not(.clicked)                 { .animation(fade .5s ease-out 1 forwards);       top: 10px; 
                                                      span { .transition(opacity .3s ease); opacity: .1; }
                                                    }

    .flyout.fade li a:not(.clicked) span            { opacity: .1; -webkit-transition: opacity 1.5s ease; }
    .flyout li:nth-of-type(1) a                     { .animation-delay(.20s); }
    .flyout li:nth-of-type(2) a                     { .animation-delay(.16s); }
    .flyout li:nth-of-type(3) a                     { .animation-delay(.12s); }
    .flyout li:nth-of-type(4) a                     { .animation-delay(.08s); }
    .flyout li:nth-of-type(5) a                     { .animation-delay(.04s); }
    .flyout li:nth-of-type(6) a                     { .animation-delay(.00s); }
    .flyout li:nth-of-type(1) a:not(.clicked) span  { .animation(spin1-contract .9s ease-out 1 backwards); }
    .flyout li:nth-of-type(2) a:not(.clicked) span  { .animation(spin2-contract .9s ease-out 1 backwards); }
    .flyout li:nth-of-type(3) a:not(.clicked) span  { .animation(spin3-contract .9s ease-out 1 backwards); }
    .flyout li:nth-of-type(4) a:not(.clicked) span  { .animation(spin4-contract .9s ease-out 1 backwards); }
    .flyout li:nth-of-type(5) a:not(.clicked) span  { .animation(spin5-contract .9s ease-out 1 backwards); }
    .flyout li:nth-of-type(6) a:not(.clicked) span  { .animation(spin6-contract .9s ease-out 1 backwards); }
    .flyout.expand li:nth-of-type(1) a              { .animation-delay(.00s); }
    .flyout.expand li:nth-of-type(2) a              { .animation-delay(.04s); }
    .flyout.expand li:nth-of-type(3) a              { .animation-delay(.08s); }
    .flyout.expand li:nth-of-type(4) a              { .animation-delay(.12s); }
    .flyout.expand li:nth-of-type(5) a              { .animation-delay(.16s); }
    .flyout.expand li:nth-of-type(6) a              { .animation-delay(.20s); }
    .flyout.expand li:nth-of-type(1) a span         { .transform(rotate(-@d1)); .animation(spin1-expand .6s ease-out 1 backwards); }
    .flyout.expand li:nth-of-type(2) a span         { .transform(rotate(-@d2)); .animation(spin2-expand .6s ease-out 1 backwards); }
    .flyout.expand li:nth-of-type(3) a span         { .transform(rotate(-@d3)); .animation(spin3-expand .6s ease-out 1 backwards); }
    .flyout.expand li:nth-of-type(4) a span         { .transform(rotate(-@d4)); .animation(spin4-expand .6s ease-out 1 backwards); }
    .flyout.expand li:nth-of-type(5) a span         { .transform(rotate(-@d5)); .animation(spin5-expand .6s ease-out 1 backwards); }
    .flyout.expand li:nth-of-type(6) a span         { .transform(rotate(-@d6)); .animation(spin6-expand .6s ease-out 1 backwards); }
    .flyout.fade li:nth-of-type(1) a.clicked span   { .transform(rotate(-@d1)); }
    .flyout.fade li:nth-of-type(2) a.clicked span   { .transform(rotate(-@d2)); }
    .flyout.fade li:nth-of-type(3) a.clicked span   { .transform(rotate(-@d3)); }
    .flyout.fade li:nth-of-type(4) a.clicked span   { .transform(rotate(-@d4)); }
    .flyout.fade li:nth-of-type(5) a.clicked span   { .transform(rotate(-@d5)); }
    .flyout.fade li:nth-of-type(6) a.clicked span   { .transform(rotate(-@d6)); }

    .flyout-btn {
      position: absolute;
      bottom: 0;
      left: 0;
      border-radius: 50%;
      height: 36px;
      width:  36px;
      border: 4px solid #fff;
      box-shadow: rgba(0, 0, 0, .3) 0 3px 8px 0, rgba(0, 0, 0, .2) 0 0 0 1px, inset rgba(0, 0, 0, .3) 0 0 0 1px, inset rgba(255, 255, 255, .3) 0 1px 0 1px;
      text-indent: -99999px;
      overflow: hidden;
      background: #f76f54;
      background: -webkit-linear-gradient(top, #f76f54 0%,#dd3535 49%,#d32121 51%,#c61f1f 100%);
      background:    -moz-linear-gradient(top, #f76f54 0%,#dd3535 49%,#d32121 51%,#c61f1f 100%);
      background:     -ms-linear-gradient(top, #f76f54 0%,#dd3535 49%,#d32121 51%,#c61f1f 100%);
      background:      -o-linear-gradient(top, #f76f54 0%,#dd3535 49%,#d32121 51%,#c61f1f 100%);
      background:         linear-gradient(top, #f76f54 0%,#dd3535 49%,#d32121 51%,#c61f1f 100%);
      z-index: 9999;
      outline: none;
      &:hover {
        // never mind
      }
      span {
        display: block;
        height: 36px;
        width:  36px;
        background: url(http://sparanoid.com/lab/path-menu/cross.svg) no-repeat center center;
        -webkit-transition: -webkit-transform .4s ease;
           -moz-transition:    -moz-transform .4s ease;
                transition:         transform .4s ease;
      }
    }
      .flyout-btn.btn-rotate span {
        .transform(rotate(-135deg)); 
      }

    .ani-expand {
      0%   { top: 150px; }
      50%  { top: -10px; }
      70%  { top: 15px; }
      100% { top: 10px; }
    }
    .ani-contract {
      0%   { top: 10px; }
      40%  { top: -25px; }
      100% { top: 150px; }
    }
    .ani-clicked {
      0%   { -webkit-transform: scale(1); opacity: 1; }
      100% { -webkit-transform: scale(5); opacity: 0; }
    }
    @-webkit-keyframes expand   { .ani-expand }
       @-moz-keyframes expand   { .ani-expand }
    @-webkit-keyframes contract { .ani-contract }
       @-moz-keyframes contract { .ani-contract }

    // a small trick
    @-webkit-keyframes clicked  {
      0%   { -webkit-transform: scale(1); opacity: 1; top: 10px; }
      90%  {                                          top: 10px; }
      99%  { -webkit-transform: scale(6); opacity: 0; top: 150px; }
      100% { -webkit-transform: scale(0); }
    }
    @-moz-keyframes clicked  {
      0%   { -moz-transform: scale(1); opacity: 1; top: 10px; }
      90%  {                                       top: 10px; }
      99%  { -moz-transform: scale(6); opacity: 0; top: 150px; }
      100% { -moz-transform: scale(0); }
    }

    @-webkit-keyframes fade  {
      0%   { -webkit-transform: scale(1); opacity: 1; top: 10px; }
      90%  {                              opacity: 0; top: 10px; }
      99%  { -webkit-transform: scale(0);             top: 150px; }
      100% { -webkit-transform: scale(0); }
    }
    @-moz-keyframes fade  {
      0%   { -moz-transform: scale(1); opacity: 1; top: 10px; }
      90%  {                           opacity: 0; top: 10px; }
      99%  { -moz-transform: scale(0);             top: 150px; }
      100% { -moz-transform: scale(0); }
    }

    .ani-spin1-expand   { 0% { .transform(rotate(0 - @d1)); } 60% { .transform(rotate(-360deg - @d1)); } 100% { .transform(rotate(-360deg - @d1)); } }
    .ani-spin2-expand   { 0% { .transform(rotate(0 - @d2)); } 60% { .transform(rotate(-360deg - @d2)); } 100% { .transform(rotate(-360deg - @d2)); } }
    .ani-spin3-expand   { 0% { .transform(rotate(0 - @d3)); } 60% { .transform(rotate(-360deg - @d3)); } 100% { .transform(rotate(-360deg - @d3)); } }
    .ani-spin4-expand   { 0% { .transform(rotate(0 - @d4)); } 60% { .transform(rotate(-360deg - @d4)); } 100% { .transform(rotate(-360deg - @d4)); } }
    .ani-spin5-expand   { 0% { .transform(rotate(0 - @d5)); } 60% { .transform(rotate(-360deg - @d5)); } 100% { .transform(rotate(-360deg - @d5)); } }
    .ani-spin6-expand   { 0% { .transform(rotate(0 - @d6)); } 60% { .transform(rotate(-360deg - @d6)); } 100% { .transform(rotate(-360deg - @d6)); } }
    .ani-spin1-contract { 0% { .transform(rotate(0 - @d1)); } 50% { .transform(rotate( 360deg)); }       100% { .transform(rotate( 360deg)); } }
    .ani-spin2-contract { 0% { .transform(rotate(0 - @d2)); } 50% { .transform(rotate( 360deg)); }       100% { .transform(rotate( 360deg)); } }
    .ani-spin3-contract { 0% { .transform(rotate(0 - @d3)); } 50% { .transform(rotate( 360deg)); }       100% { .transform(rotate( 360deg)); } }
    .ani-spin4-contract { 0% { .transform(rotate(0 - @d4)); } 50% { .transform(rotate( 360deg)); }       100% { .transform(rotate( 360deg)); } }
    .ani-spin5-contract { 0% { .transform(rotate(0 - @d5)); } 50% { .transform(rotate( 360deg)); }       100% { .transform(rotate( 360deg)); } }
    .ani-spin6-contract { 0% { .transform(rotate(0 - @d6)); } 50% { .transform(rotate( 360deg)); }       100% { .transform(rotate( 360deg)); } }

    @-webkit-keyframes spin1-expand   { .ani-spin1-expand }
    @-webkit-keyframes spin2-expand   { .ani-spin2-expand }
    @-webkit-keyframes spin3-expand   { .ani-spin3-expand }
    @-webkit-keyframes spin4-expand   { .ani-spin4-expand }
    @-webkit-keyframes spin5-expand   { .ani-spin5-expand }
    @-webkit-keyframes spin6-expand   { .ani-spin6-expand }
       @-moz-keyframes spin1-expand   { .ani-spin1-expand }
       @-moz-keyframes spin2-expand   { .ani-spin2-expand }
       @-moz-keyframes spin3-expand   { .ani-spin3-expand }
       @-moz-keyframes spin4-expand   { .ani-spin4-expand }
       @-moz-keyframes spin5-expand   { .ani-spin5-expand }
       @-moz-keyframes spin6-expand   { .ani-spin6-expand }
    @-webkit-keyframes spin1-contract { .ani-spin1-contract }
    @-webkit-keyframes spin2-contract { .ani-spin2-contract }
    @-webkit-keyframes spin3-contract { .ani-spin3-contract }
    @-webkit-keyframes spin4-contract { .ani-spin4-contract }
    @-webkit-keyframes spin5-contract { .ani-spin5-contract }
    @-webkit-keyframes spin6-contract { .ani-spin6-contract }
       @-moz-keyframes spin1-contract { .ani-spin1-contract }
       @-moz-keyframes spin2-contract { .ani-spin2-contract }
       @-moz-keyframes spin3-contract { .ani-spin3-contract }
       @-moz-keyframes spin4-contract { .ani-spin4-contract }
       @-moz-keyframes spin5-contract { .ani-spin5-contract }
       @-moz-keyframes spin6-contract { .ani-spin6-contract }
  }
}

.bsap {
  position: fixed;
  top: 0;
  right: 0;
  width: 130px;
  margin: 15px;
  padding: 10px;
  background: rgba(255, 255, 255, .5);
  border: 1px solid rgba(0, 0, 0, .1);
}
  .bsap:hover { background: rgba(255, 255, 255, .95); }
  .bsap a { color: #555; }
    .bsap a:hover { color: #000; }
  .bsa_it_t {
    font-size: 14px;
    display: block;
    padding: 5px 0;
    border-bottom: 1px solid rgba(0, 0, 0, .05);
  }
  .bsa_it_d {
    font-size: 12px;
    display: block;
    padding: 5px 0;
  }
  .bsa_it_p { font-size: 10px; }
    .bsa_it_p a { opacity: .5; }