7+ JavaScript Circle Menu Examples

This post contains a total of 7+ Hand-Picked JavaScript Circle ( Circular ) Menu Examples with Source Code. All these Circle menus are made using JavaScript and Styled using CSS.

You can use the source code of these examples with credits to the original owner.

Related Posts

JavaScript Circle Menu Examples

1. By Willmer Barahona

Made by Willmer Barahona. JavaScript Circle Menu with animation and click effect. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">
  
<style>
html {
  font-size: 16px;
}

body {
  background: #2c3e50;
  box-sizing: border-box;
  transition: all 0.25s ease-in;
}

*, *:before, *:after {
  box-sizing: inherit;
}

a {
  color: white;
  text-decoration: none;
}

.menu-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 30rem;
  height: 30rem;
  margin-top: -15rem;
  margin-left: -15rem;
}

.menu {
  width: 100%;
  height: 100%;
  transform: scale(0);
  transform-origin: center;
  transition: all 0.08s ease-in-out;
}
.menu li {
  position: absolute;
  top: 50%;
  left: 50%;
  display: inline-block;
  width: 4rem;
  height: 80%;
  margin-top: -12rem;
  margin-left: -2rem;
  text-align: center;
}
.menu li.spin {
  z-index: 5;
}
.menu li.spin .icon-holder {
  -webkit-animation: spin 0.7s linear forwards;
          animation: spin 0.7s linear forwards;
}
.menu li.spin .circle-holder {
  display: block;
}
.menu li.spin .circle-holder circle {
  -webkit-animation: dash 0.7s linear forwards;
          animation: dash 0.7s linear forwards;
}
.menu a {
  position: relative;
  display: inline-block;
  width: 4rem;
  height: 4rem;
  margin-top: 4.5rem;
  padding: 1rem;
  border-radius: 100%;
  transform: scale(1, 1);
}
.menu a i {
  display: inline-block;
  vertical-align: middle;
  line-height: 1.2;
}
.menu.open {
  transform: scale(1);
}

.icon-holder {
  position: relative;
  z-index: 1;
  display: inline-block;
  width: 4rem;
  height: 100%;
}

.circle-holder {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 0;
  display: none;
  width: 24rem;
  height: 24rem;
  margin: -12rem;
  padding: 1rem;
  transform: rotate(-90deg);
}
.circle-holder circle {
  width: 100%;
  height: 100%;
  stroke-width: 4rem;
  stroke-dasharray: 560;
  stroke-dashoffset: 560;
  stroke-linecap: round;
}

.menu-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 10;
  display: block;
  width: 4rem;
  height: 4rem;
  margin: -2rem;
  padding: 1.3rem;
  background: white;
  border: none;
  box-shadow: none;
  border-radius: 100%;
  text-align: center;
  line-height: 1;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  outline: none;
  cursor: pointer;
  font-size: 0;
}
.menu-btn i {
  position: relative;
  z-index: 11;
  display: inline-block;
  vertical-align: middle;
  width: 100%;
  height: 0.1rem;
  margin: 0 auto;
  background: #2c3e50;
}
.menu-btn i:nth-child(2) {
  margin: 0.34rem auto;
}

.clicked.menu-btn {
  -webkit-animation: buttonactive ease-in 0.2s forwards 1;
          animation: buttonactive ease-in 0.2s forwards 1;
}
.clicked.menu-btn i:first-child {
  -webkit-animation: top-down ease-in 0.2s forwards 1;
          animation: top-down ease-in 0.2s forwards 1;
}
.clicked.menu-btn i:nth-child(2) {
  -webkit-animation: middle ease-in 0.01s forwards 1;
          animation: middle ease-in 0.01s forwards 1;
}
.clicked.menu-btn i:nth-child(3) {
  -webkit-animation: down-top ease-in 0.2s forwards 1;
          animation: down-top ease-in 0.2s forwards 1;
}
.clicked .ripple {
  -webkit-animation: ripples ease-in 0.35s forwards 1;
          animation: ripples ease-in 0.35s forwards 1;
}

.ripple {
  position: absolute;
  top: -1rem;
  left: -1rem;
  z-index: 10;
  display: block;
  width: 6rem;
  height: 6rem;
  transform: scale(0.5);
  opacity: 0;
  border: 2rem solid white;
  border-radius: 100%;
}

.menu li:nth-child(1) {
  transform: rotate(0deg);
}
.menu li:nth-child(1) a {
  transform: rotate(-0deg);
  background: #2980b9;
}
.menu li:nth-child(1) circle {
  stroke: #2980b9;
}

.bg-0 {
  background: #2980b9;
}

.menu li:nth-child(2) {
  transform: rotate(71.5deg);
}
.menu li:nth-child(2) a {
  transform: rotate(-71.5deg);
  background: #c0392b;
}
.menu li:nth-child(2) circle {
  stroke: #c0392b;
}

.bg-1 {
  background: #c0392b;
}

.menu li:nth-child(3) {
  transform: rotate(143deg);
}
.menu li:nth-child(3) a {
  transform: rotate(-143deg);
  background: #1abc9c;
}
.menu li:nth-child(3) circle {
  stroke: #1abc9c;
}

.bg-2 {
  background: #1abc9c;
}

.menu li:nth-child(4) {
  transform: rotate(214.5deg);
}
.menu li:nth-child(4) a {
  transform: rotate(-214.5deg);
  background: #f39c12;
}
.menu li:nth-child(4) circle {
  stroke: #f39c12;
}

.bg-3 {
  background: #f39c12;
}

.menu li:nth-child(5) {
  transform: rotate(286deg);
}
.menu li:nth-child(5) a {
  transform: rotate(-286deg);
  background: #8e44ad;
}
.menu li:nth-child(5) circle {
  stroke: #8e44ad;
}

.bg-4 {
  background: #8e44ad;
}

@-webkit-keyframes spin {
  0% {
    transform: rotate(0deg);
    opacity: 1;
  }
  80% {
    transform: rotate(360deg);
    opacity: 1;
  }
  100% {
    transform: rotate(360deg);
    opacity: 0;
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
    opacity: 1;
  }
  80% {
    transform: rotate(360deg);
    opacity: 1;
  }
  100% {
    transform: rotate(360deg);
    opacity: 0;
  }
}
@-webkit-keyframes dash {
  0% {
    stroke-dashoffset: 560;
    stroke-width: 4rem;
  }
  80% {
    stroke-dashoffset: 0;
    stroke-width: 4rem;
    opacity: 1;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-width: 6rem;
    opacity: 0;
  }
}
@keyframes dash {
  0% {
    stroke-dashoffset: 560;
    stroke-width: 4rem;
  }
  80% {
    stroke-dashoffset: 0;
    stroke-width: 4rem;
    opacity: 1;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-width: 6rem;
    opacity: 0;
  }
}
@-webkit-keyframes buttonactive {
  0% {
    background: white;
    transform: rotate(0deg);
  }
  100% {
    background: #4f6f8f;
    transform: rotate(-90deg);
  }
}
@keyframes buttonactive {
  0% {
    background: white;
    transform: rotate(0deg);
  }
  100% {
    background: #4f6f8f;
    transform: rotate(-90deg);
  }
}
@-webkit-keyframes middle {
  0% {
    opacity: 1;
    left: 0;
  }
  100% {
    opacity: 0;
    left: -4rem;
  }
}
@keyframes middle {
  0% {
    opacity: 1;
    left: 0;
  }
  100% {
    opacity: 0;
    left: -4rem;
  }
}
@-webkit-keyframes top-down {
  0% {
    top: 0;
    transform: rotate(0);
  }
  100% {
    top: 0.35rem;
    transform: rotate(-45deg);
  }
}
@keyframes top-down {
  0% {
    top: 0;
    transform: rotate(0);
  }
  100% {
    top: 0.35rem;
    transform: rotate(-45deg);
  }
}
@-webkit-keyframes down-top {
  0% {
    top: 0;
    transform: rotate(0);
  }
  100% {
    top: -0.4rem;
    transform: rotate(45deg);
  }
}
@keyframes down-top {
  0% {
    top: 0;
    transform: rotate(0);
  }
  100% {
    top: -0.4rem;
    transform: rotate(45deg);
  }
}
@-webkit-keyframes ripples {
  0% {
    opacity: 1;
    transform: scale(0.5);
    border-width: 3rem;
  }
  100% {
    opacity: 0.5;
    transform: scale(1);
    border-width: 0rem;
  }
}
@keyframes ripples {
  0% {
    opacity: 1;
    transform: scale(0.5);
    border-width: 3rem;
  }
  100% {
    opacity: 0.5;
    transform: scale(1);
    border-width: 0rem;
  }
}
@-webkit-keyframes bouncein {
  to {
    transform: scale(1);
  }
}
@keyframes bouncein {
  to {
    transform: scale(1);
  }
}
</style>
</head>
<body>
  <nav class="menu-wrapper">
  <button class="menu-btn" has-ripple="true">
    <i></i>
    <i></i>
    <i></i>
    <span class="ripple"></span>
  </button>
  <ul class="menu">
    <li class="menuitem-wrapper">
      <div class="icon-holder">
        <a href="#" class="menu-item">
            <i class="material-icons">home</i>
        </a>
      </div>
      <svg class="circle-holder">
        <circle r="88" cx="50%" cy="50%" fill="none">
        </circle>
      </svg>
    </li>
    <li class="menuitem-wrapper">
      <div class="icon-holder">
        <a href="#" class="menu-item">
            <i class="material-icons">face</i>
        </a>
      </div>
      <svg class="circle-holder">
        <circle r="88" cx="50%" cy="50%" fill="none">
        </circle>
      </svg>
    </li>
    <li class="menuitem-wrapper">
      <div class="icon-holder">
        <a href="#" class="menu-item">
            <i class="material-icons">android</i>
        </a>
      </div>
      <svg class="circle-holder">
        <circle r="88" cx="50%" cy="50%" fill="none">
        </circle>
      </svg>
    </li>
    <li class="menuitem-wrapper">
      <div class="icon-holder">
        <a href="#" class="menu-item">
            <i class="material-icons">shopping_cart</i>
        </a>
      </div>
      <svg class="circle-holder">
        <circle r="88" cx="50%" cy="50%" fill="none">
        </circle>
      </svg>
    </li>
    <li class="menuitem-wrapper">
      <div class="icon-holder">
        <a href="#" class="menu-item">
            <i class="material-icons">room</i>
        </a>
      </div>
      <svg class="circle-holder">
        <circle r="88" cx="50%" cy="50%" fill="none">
        </circle>
      </svg>
    </li>
  </ul>
</nav>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
      <script>
$('[has-ripple="true"]').click(function () {
  $(this).toggleClass('clicked');
  $('.menu').toggleClass('open');
});

$('.menu a').each(function (index) {
  var thismenuItem = $(this);

  thismenuItem.click(function (event) {
    event.preventDefault();

    $('.menuitem-wrapper').eq(index).addClass('spin');

    var timer = setTimeout(function () {
      $('body').removeAttr('class').addClass('bg-' + index);
      $('.menuitem-wrapper').eq(index).removeClass('spin');
      $('.menu').removeClass('open');
      $('.menu-btn').removeClass('clicked');
    }, 800);
  });
});
    </script>
</body>
</html>

2. By deineko

Made by deineko. Circle menu with arrow and spin effect. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
body {background:#151515}
.menu_wrapper {position:relative;min-height:500px;width:100%}
#Menu {width:320px;height:320px;border-radius:50%;position:absolute;padding:0;overflow:visible;border-width:10px;border-style:solid;border-color:#89c759 #3bb4e5 #823d97 #eb1777;transition:all 1s ease-in-out 0.5s;top:48px;left:50%;margin-left:-228px}
.round {width:300px;height:300px;position:absolute;top:10px;left:10px;border-radius:50%;text-align:center;line-height:240px;color:#fff;font-size:160px;text-transform:uppercase;transition:all 0.3s ease-in-out;}
.item {background:#151515;border-width:10px;border-style: solid;width:96px;height:96px;line-height:76px;border-radius:50%;position:absolute;box-sizing:border-box;text-align:center;font-weight:bold;font-size:11px;text-transform:uppercase;transform:rotate(0deg);cursor:pointer;transition:all 1s ease-in-out 0s;}
.item a:hover, .item a:focus, .item a:active {transition:all 0.3s ease-in-out;color:#fff}
.item1 {top:-48px;left:50%;margin-left:-48px;border-color:#89c759}
.item2 {right:-48px;top:50%;margin-top:-48px;border-color:#3bb4e5}
.item3 {bottom:-48px;left:50%;margin-left:-48px;border-color:#823d97}
.item4 {left:-48px;top:50%;margin-top:-48px;border-color:#eb1777}
.green {background:#89c759}
/*@keyframes RotateCV {
  0% {transform:rotate(0deg)}
  25% {transform:rotate(90deg)}
  50% {transform:rotate(180deg)}
  75% {transform:rotate(270deg)}
  100% {transform:rotate(360deg)}
}
@keyframes RotateCV {
  0% {transform:rotate(0deg)}
  25% {transform:rotate(-90deg)}
  50% {transform:rotate(-180deg)}
  75% {transform:rotate(-270deg)}
  100% {transform:rotate(-360deg)}
}*/
.pm_Zn {/*background:#89c759*/}
.pm_Sm {/*background-color:#3bb4e5;*/ transform:rotate(-90deg)}
.pm_Sm .item, .pm_Sm .round {transform:rotate(90deg)}
.pm_Ch {/*background-color:#823d97;*/ transform:rotate(-180deg)}
.pm_Ch .item, .pm_Ch .round {transform:rotate(180deg)}
.pm_Ot {/*background-color:#eb1777;*/ transform:rotate(90deg)}
.pm_Ot .item, .pm_Ot .round {transform:rotate(-90deg)}
.item a {color:#666;text-decoration:none;display:block;outline:none;width:auto;transition:all 1s ease-in-out}
a.activeLink {color:#fff}
.round a {color:rgba(255,255,255,1);text-decoration:none;}
</style>
</head>
<body>
  <div class='menu_wrapper'>
  <div class='menu' id='Menu'>
    <div class='round'>
      <a href='http://deineko.me' target='_blank'>&uarr;</a>
    </div>
    <div class='item item1'>
      <a class='Zn' href='#'>Π—Π½Π°Ρ‚ΡŒ</a>
    </div>
    <div class='item item2'>
      <a class='Sm' href='#'>Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ</a>
    </div>
    <div class='item item3'>
      <a class='Ch' href='#'>Π§ΠΈΡ‚Π°Ρ‚ΡŒ</a>
    </div>
    <div class='item item4'>
      <a class='Ot' href='#'>ΠžΡ‚Π΄Ρ‹Ρ…Π°Ρ‚ΡŒ</a>
    </div>
  </div>
</div>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
      <script>
$(document).ready(function () {
  $(".Zn, .Sm, .Ch, .Ot").on("click", function () {
    $(".menu")
    // Remove all classes
    .removeClass()
    // Put back .primary-color class + the clicked elements class with the added prefix "pm_".
    .addClass('menu pm_' + $(this).attr('class'));
  });
  return false;
});
//# sourceURL=pen.js
    </script>
</body>
</html>

3. By bengkel blogger

Made by bengkel blogger. Circle Menu with cool spinning loading effect. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  
<style>
@import url(https://fonts.googleapis.com/css?family=Oswald:400,300,700);
html, body {
  height: 100%;
}

body {
  margin: 0;
  background: linear-gradient(#eee, #ccc);
  overflow: hidden;
}

.selector {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 140px;
  height: 140px;
  margin-top: -70px;
  margin-left: -70px;
}

.selector, .selector button {
  font-family: "Oswald", sans-serif;
  font-weight: 300;
}

.selector button {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 10px;
  background: #428bca;
  border-radius: 50%;
  border: 0;
  color: white;
  font-size: 20px;
  cursor: pointer;
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1);
  transition: all 0.1s;
}

.selector button:hover {
  background: #3071a9;
}

.selector button:focus {
  outline: none;
}

.selector ul {
  position: absolute;
  list-style: none;
  padding: 0;
  margin: 0;
  top: -20px;
  right: -20px;
  bottom: -20px;
  left: -20px;
}

.selector li {
  position: absolute;
  width: 0;
  height: 100%;
  margin: 0 50%;
  -webkit-transform: rotate(-360deg);
  transition: all 0.8s ease-in-out;
}

.selector li input {
  display: none;
}

.selector li input + label {
  position: absolute;
  left: 50%;
  bottom: 100%;
  width: 0;
  height: 0;
  line-height: 1px;
  margin-left: 0;
  background: #fff;
  border-radius: 50%;
  text-align: center;
  font-size: 1px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: none;
  transition: all 0.8s ease-in-out, color 0.1s, background 0.1s;
}

.selector li input + label:hover {
  background: #f0f0f0;
}

.selector li input:checked + label {
  background: #5cb85c;
  color: white;
}

.selector li input:checked + label:hover {
  background: #449d44;
}

.selector.open li input + label {
  width: 80px;
  height: 80px;
  line-height: 80px;
  margin-left: -40px;
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1);
  font-size: 14px;
}
</style>
</head>
<body>
  <div class='selector'>
  <ul>
    <li>
      <input id='1' type='checkbox'>
      <label for='1'>Option 1</label>
    </li>
    <li>
      <input id='2' type='checkbox'>
      <label for='2'>Option 2</label>
    </li>
    <li>
      <input id='3' type='checkbox'>
      <label for='3'>Option 3</label>
    </li>
    <li>
      <input id='4' type='checkbox'>
      <label for='4'>Option 4</label>
    </li>
    <li>
      <input id='5' type='checkbox'>
      <label for='5'>Option 5</label>
    </li>
    <li>
      <input id='6' type='checkbox'>
      <label for='6'>Option 6</label>
    </li>
    <li>
      <input id='7' type='checkbox'>
      <label for='7'>Option 7</label>
    </li>
    <li>
      <input id='8' type='checkbox'>
      <label for='8'>Option 8</label>
    </li>
  </ul>
  <button>Click here</button>
</div>
    <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
      <script>
var angleStart = -360;

// jquery rotate animation
function rotate(li, d) {
  $({ d: angleStart }).animate({ d: d }, {
    step: function (now) {
      $(li).
      css({ transform: 'rotate(' + now + 'deg)' }).
      find('label').
      css({ transform: 'rotate(' + -now + 'deg)' });
    }, duration: 0 });

}

// show / hide the options
function toggleOptions(s) {
  $(s).toggleClass('open');
  var li = $(s).find('li');
  var deg = $(s).hasClass('half') ? 180 / (li.length - 1) : 360 / li.length;
  for (var i = 0; i < li.length; i++) {if (window.CP.shouldStopExecution(0)) break;
    var d = $(s).hasClass('half') ? i * deg - 90 : i * deg;
    $(s).hasClass('open') ? rotate(li[i], d) : rotate(li[i], angleStart);
  }window.CP.exitedLoop(0);
}

$('.selector button').click(function (e) {
  toggleOptions($(this).parent());
});

setTimeout(function () {toggleOptions('.selector');}, 100);
    </script>
</body>
</html>

4. By Tim Normington

Made by Tim Normington. Expanding Circle Menu with ripple effect. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700,300,800' rel='stylesheet' type='text/css'>
  <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css'>
  
<style>
html {
  overflow: hidden;
}

body {
  background-color: #F3F8D8;
  position: relative;
  font-family: "Open Sans", sans-serif;
}

a {
  text-decoration: none;
  color: #2679ED;
  border: 1px solid transparent;
  transition: all 0.15s ease-out;
}
a:hover {
  color: #A6DDED;
  border-bottom: 1px solid #2679ED;
}

.header {
  height: 100vh;
  position: relative;
}

.nav {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  z-index: 8;
  pointer-events: none;
  width: 25em;
  text-align: center;
}

.nav-list {
  list-style-type: none;
  padding: 0;
  margin: 0;
  line-height: 3.5em;
}
.nav-list li {
  opacity: 0;
  transform: translateX(-100px);
}

.nav-circle {
  width: 10px;
  height: 10px;
  position: absolute;
  background-color: #710911;
  background-image: radial-gradient(#b80f1b, #710911);
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  border-radius: 50%;
  z-index: 5;
}

.nav a {
  color: white;
  font-size: 2em;
  font-weight: 100;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
  position: relative;
  border: none;
}
.nav a:after {
  left: 50%;
  bottom: 0%;
  transform: translateX(-50%);
  content: "";
  display: block;
  height: 2px;
  background-color: white;
  position: absolute;
  width: 0;
  transition: all 0.15s ease-out;
}
.nav a:hover {
  border: none;
}
.nav a:hover:after {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  background-color: white;
  position: absolute;
}

.fab {
  z-index: 10;
  border-radius: 50%;
  outline: 0;
  border: 0;
  padding: 1em;
  width: 3em;
  height: 3em;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2em;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5), 0 0 2px rgba(0, 0, 0, 0.25);
  transition: all 0.15s ease-out;
}
.fab:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.65);
}
.fab:active {
  transform: translateX(-50%) translateY(-50%) scale(0.9);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
.fab:focus {
  outline: none;
}

.fab.fab-primary {
  background-color: #2679ED;
  color: #A6DDED;
}
.fab.fab-primary:hover {
  color: #0d4aa0;
}
.fab.fab-primary:active {
  background-color: #1160cf;
}

.fab.fab-close {
  background-color: #E71322;
  color: white;
}
.fab.fab-close:hover {
  color: white;
}

.nav-toggle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
  transition: all 0.25s ease-out;
}
.nav-toggle i {
  width: 3em;
  height: 3em;
  transition: all 0.25s ease-out;
}
.nav-toggle.open {
  background-color: white;
  color: #2679ED;
  top: 75%;
  transform: translateY(100%) translateX(-50%);
}
.nav-toggle.open i {
  transform: translateY(-3em);
}
.nav-toggle.open:active {
  transform: translateX(-50%) translateY(100%) scale(0.9);
  background-color: #A6DDED;
}

.ripple {
  width: 0;
  height: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%) scale(1);
  border-radius: 50%;
  z-index: 4;
  animation: pulse 4s infinite;
  transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.inner-ripple {
  background-color: rgba(38, 121, 237, 0.5);
  width: 100px;
  height: 100px;
}

.middle-ripple {
  background-color: rgba(38, 121, 237, 0.25);
  width: 200px;
  height: 200px;
  animation-delay: 0.35s;
}

.outer-ripple {
  background-color: rgba(38, 121, 237, 0.15);
  width: 350px;
  height: 350px;
  animation-delay: 0.75s;
}

@keyframes pulse {
  0% {
    opacity: 0;
    transform: scale(1) translateX(-50%) translateY(-50%);
  }
  30% {
    opacity: 0.5;
  }
  100% {
    transform: scale(1.5) translateX(-33.3%) translateY(-33.3%);
    opacity: 0;
  }
}
</style>
</head>
<body>
  <header class="header">
  <button id="nav-toggle" class="fab fab-primary nav-toggle">
    <i class="fa fa-bars"></i>
    <i class="fa fa-close"></i>
  </button>
</header>
<nav class="nav" id="nav">
  <ul class="nav-list">
    <li><a href="#">Blog</a></li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">The Podcast</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
<!--   <button class="fab fab-close">
    <i class="fa fa-close"></i>
  </button> -->
</nav>
<div class="nav-circle" id="nav-circle"></div>
<div class="ripple inner-ripple" id="inner-ripple"></div>
<div class="ripple middle-ripple" id="middle-ripple"></div>
<div class="ripple outer-ripple" id="outer-ripple"></div>
  <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.4/TweenMax.min.js'></script>
      <script>
$(document).ready(function () {
  var $nav_toggle = $('#nav-toggle');
  // var $nav_toggle_after = $('#nav-toggle::after');
  var $nav_circle = $('#nav-circle');
  var $nav = $('#nav');
  var $nav_list_items = $nav.find('li');
  // var $nav_links = $
  var $ripples = $('.ripple');

  TweenMax.set($nav_list_items, {
    transformOrigin: 'center center' });


  // TweenMax.set($ripples, {
  //   transformOrigin: 'center center',
  // });
  $nav_toggle.click(function () {
    if ($(this).hasClass('open')) {
      // NAV CLOSES
      TweenMax.to($nav_circle, 1, {
        width: '10px',
        height: '10px',
        ease: Power4.easeOut });

      TweenMax.set($nav, {
        pointerEvents: 'none' });

      TweenMax.to($nav_list_items, 0.5, {
        opacity: '0'
        // x: '-100px',
      });
      TweenMax.set($nav_list_items, {
        x: '-100px',
        delay: 0.5 });

    } else {
      // NAV OPENS
      TweenMax.to($nav_circle, 1, {
        width: '400vw',
        height: '400vw',
        ease: Power4.easeOut });

      TweenMax.set($nav, {
        pointerEvents: 'auto' });

      TweenMax.staggerTo($nav_list_items, 0.5, {
        opacity: '100',
        x: 0,
        ease: Power4.easeOut },
      0.15);
      TweenMax.to($ripples, 0.5, {
        opacity: '0' });

    }
    $(this).toggleClass('open');
  });
});
    </script>
</body>
</html>

5. By Syakir Rahman

Made by Syakir Rahman. Circle Menu with CSS and JavaScript. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css'>
  
<style>
* {
	padding:0;
	margin:0;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-box-sizing:border-box;
}
img {
	max-width: 100%;
	height: auto;
}
ul,ol {
	list-style-type: none;
}

body {
	background-color: #0273c7;
	font-family: 'cambria', sans-serif;
}

@media (min-width:768px){
	.container {
		width:900px;
	}

}
.container {
	margin:10px auto;
	position: relative;
	overflow: hidden;
}
.page-title {
	margin:17px auto;
	text-align: center;
	color:#fff;
	font-size: 17px;
}
.page-title h1 {
	font-size:40px;
	line-height: 1;
}
.page-title a{
	color:#ff7777;
	text-decoration: none;
}
.page-title a:hover{
	text-decoration: underline;
	color: #ff3333;
}

.circle-menu-box {
	width:600px;
	height: 600px;
	position: relative;
	margin:30px auto;
}
	.circle-menu-box a.menu-item {
		display: block;
		text-decoration: none;
		border-radius: 100%;
		margin:20px;
		text-align: center;
		width:100px;
		height:100px;
		background-color:#fff;
		color:#777;
		padding:30px 0;
    line-height:1;
		position: absolute;
		font-size: 30px;

		transition:all 0.5s;
		-moz-transition:all 0.5s;
		-webkit-transition:all 0.5s;
		-o-transition:all 0.5s;
	}

	.circle-menu-box a.menu-item:hover {
		transform:scale(1.5);
		-webkit-transform:scale(1.5);
		-moz-transform:scale(1.5);
		-o-transform:scale(1.5);
		color:#fff;
		background: #ff3333;
	}
</style>
</head>
<body>
  <div class="container">
	<div class="page-title">
		<h1>Simple Circle Menu <br/><small>using CSS and Javascript</small></h1>
		<small class="author">By <a href="http://www.syakirurohman.net">Syakir Rahman</a></small>
	</div>

	<div class="menu-container">

		<div class="circle-menu-box">

			<a href="#" class="menu-item">
				<span class="fa fa-home"></span>
			</a>

			<a href="#" class="menu-item">
				<span class="fa fa-tag"></span>
			</a>

			<a href="#" class="menu-item">
				<span class="fa fa-info-circle"></span>
			</a>

			<a href="#" class="menu-item">
				<span class="fa fa-comments"></span>
			</a>

			<a href="#" class="menu-item">
				<span class="fa fa-folder-open"></span>
			</a>

			<a href="#" class="menu-item">
				<span class="fa fa-group"></span>
			</a>

			<a href="#" class="menu-item">
				<span class="fa fa-newspaper-o"></span>
			</a>

			<a href="#" class="menu-item">
				<span class="fa fa-sitemap"></span>
			</a>
		</div>
	</div>
</div>
    <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>
      <script>
var items = document.querySelectorAll('.circle-menu-box a.menu-item');

for (var i = 0, l = items.length; i < l; i++) {if (window.CP.shouldStopExecution(0)) break;
  items[i].style.left = (40 - 35 * Math.cos(-0.5 * Math.PI - 2 * (1 / l) * i * Math.PI)).toFixed(4) + "%";

  items[i].style.top = (40 + 35 * Math.sin(-0.5 * Math.PI - 2 * (1 / l) * i * Math.PI)).toFixed(4) + "%";
}window.CP.exitedLoop(0);
//# sourceURL=pen.js
    </script>
</body>
</html>

6. By VINAY

Made by VINAY. Circle dial menu. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
  
<style>
#mainB {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: url("http://grantcr.com/files/bg.png") 0 0;
  z-index: -9000;
  opacity: 0.98;
}

.bg {
  background: url("http://grantcr.com/files/texture.png") 0 0;
  height: 100%;
  opacity: 0.99;
  z-index: -7000;
}

.bg1 {
  background: url("http://grantcr.com/files/bgg.png") 0 0;
  height: 100%;
  opacity: 0.95;
  z-index: -7000;
}

.over {
  background: url("http://grantcr.com/files/top.png") top center no-repeat;
  position: fixed;
  opacity: 0.8;
  width: 100%;
  top: -150px;
  bottom: 90%;
  z-index: 300;
  height: 500px;
}

.dial {
  width: 165px;
  height: 165px;
  border-radius: 50%;
  position: relative;
  display: block;
  margin: auto auto;
  top: 300px;
  opacity: 0.9;
  *zoom: 1;
  filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFC9CFD7', endColorstr='#FFB0B7C1');
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2M5Y2ZkNyIvPjxzdG9wIG9mZnNldD0iNDYlIiBzdG9wLWNvbG9yPSIjMmIyZjNlIiBzdG9wLW9wYWNpdHk9IjAuOTciLz48c3RvcCBvZmZzZXQ9IjQ4JSIgc3RvcC1jb2xvcj0iIzJiMmYzZSIgc3RvcC1vcGFjaXR5PSIwLjk3Ii8+PHN0b3Agb2Zmc2V0PSI1MiUiIHN0b3AtY29sb3I9IiMyYjJmM2UiLz48c3RvcCBvZmZzZXQ9IjU1JSIgc3RvcC1jb2xvcj0iIzJiMmYzZSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2IwYjdjMSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #c9cfd7), color-stop(46%, rgba(43, 47, 62, 0.97)), color-stop(48%, rgba(43, 47, 62, 0.97)), color-stop(52%, #2b2f3e), color-stop(55%, #2b2f3e), color-stop(100%, #b0b7c1));
  background-image: -moz-linear-gradient(top, #c9cfd7 0%, rgba(43, 47, 62, 0.97) 46%, rgba(43, 47, 62, 0.97) 48%, #2b2f3e 52%, #2b2f3e 55%, #b0b7c1 100%);
  background-image: -webkit-linear-gradient(top, #c9cfd7 0%, rgba(43, 47, 62, 0.97) 46%, rgba(43, 47, 62, 0.97) 48%, #2b2f3e 52%, #2b2f3e 55%, #b0b7c1 100%);
  background-image: linear-gradient(to bottom, #c9cfd7 0%, rgba(43, 47, 62, 0.97) 46%, rgba(43, 47, 62, 0.97) 48%, #2b2f3e 52%, #2b2f3e 55%, #b0b7c1 100%);
  z-index: 99999;
  box-shadow: 2px 15px 15px 7px rgba(0, 0, 0, 0.3), -15px 2px 5px rgba(0, 0, 0, 0.2), 1px 10px 15px rgba(0, 0, 0, 0.5), 0px 10px 5px rgba(0, 0, 0, 0.7);
}
.dial .grad {
  background: url("http://grantcr.com/files/dail.png") 0 0 no-repeat;
  width: 165px;
  z-index: 999;
  height: 165px;
  position: absolute;
  top: 3px;
  border-radius: 50%;
  left: 3px;
  opacity: 1;
}

.container {
  width: 325px;
  position: relative;
  margin: 0 auto;
  height: 100%;
}

.nav {
  position: relative;
  width: 100%;
  top: 200px;
}

#nav li {
  display: inline-block;
  list-style-type: none;
  float: left;
  margin-right: 43px;
}
#nav li a {
  cursor: pointer;
}
#nav li:nth-of-type(1) {
  position: relative;
  left: 10px;
}
#nav li:nth-of-type(1):after {
  content: " ";
  background: url("http://grantcr.com/files/circle.png") center center no-repeat;
  position: absolute;
  width: 10px;
  height: 10px;
  top: 7px;
  left: 35px;
}
#nav li:nth-of-type(2) {
  position: relative;
  top: -85px;
  left: -25px;
}
#nav li:nth-of-type(2):after {
  content: " ";
  background: url("http://grantcr.com/files/circle.png") center center no-repeat;
  position: absolute;
  width: 10px;
  height: 10px;
  left: 30px;
  top: 25px;
}
#nav li:nth-of-type(3) {
  position: relative;
  top: -120px;
}
#nav li:nth-of-type(3):before {
  content: " ";
  background: url("http://grantcr.com/files/circle.png") center center no-repeat;
  width: 10px;
  height: 10px;
  position: absolute;
  top: 30px;
  left: 12px;
}
#nav li:nth-of-type(4) {
  position: relative;
  top: -85px;
  left: 25px;
}
#nav li:nth-of-type(4):before {
  content: " ";
  background: url("http://grantcr.com/files/circle.png") center center no-repeat;
  width: 10px;
  position: absolute;
  height: 10px;
  top: 25px;
  left: -15px;
}
#nav li:nth-of-type(5) {
  position: relative;
  left: -15px;
  top: -1px;
  margin: 0;
}
#nav li:nth-of-type(5):before {
  content: " ";
  background: url("http://grantcr.com/files/circle.png") center center no-repeat;
  position: absolute;
  width: 10px;
  height: 10px;
  left: -17px;
  top: 8px;
}

.active > a {
  box-shadow: 0px 0px 100px 25px rgba(255, 255, 255, 0.2);
}

.r0 {
  transition: all 1s ease;
  transform: rotate(0deg);
}

.rr1 {
  transition: all 1s ease;
  transform: rotate(45deg);
}

.rr2 {
  transition: all 1s ease;
  transform: rotate(90deg);
}

.lr1 {
  transition: all 1s ease;
  transform: rotate(-45deg);
}

.lr2 {
  transition: all 1s ease;
  transform: rotate(-90deg);
}
</style>
</head>
<body>
  <div id="mainB">
  <div class="bg">
     <div class="bg1">

     </div>
  </div>
</div>
<div class="over">
  <div class="dial">
    <div class="grad">
        
    </div>
  </div>
  <div class="container">
  <div class="nav">
    <ul id="nav">
      <li id="email">
        <a>
          <img src="http://grantcr.com/files/iemail.png" />
        </a>
      </li>
      <li id="photo">
        <a>
          <img src="http://grantcr.com/files/iphoto.png" />
        </a>
      </li>
      <li id="cloud" class="active">
        <a>
          <img src="http://grantcr.com/files/icloud.png" />
        </a>
      </li>
      <li id="portfolio">
        <a>
          <img src="http://grantcr.com/files/portfolio.png" />
        </a>
      </li>
      <li id="settings">
        <a>
          <img src="http://grantcr.com/files/settings.png" />
        </a>
      </li>
    </ul>
  </div>
  </div>
</div>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
      <script>
function doSwap() {
  $("#nav li").each(function () {
    if ($(this).hasClass("active")) {
      swap($(this));
    } else
    {
      swapBack($(this));
    }
  });
}
doSwap();
function clear(o) {
  $("#nav li").each(function () {
    $(this).removeClass("active");
  });
}
$("#nav li").click(function () {
  clear();
  $(this).addClass("active");
  doSwap();
  rotate('.dial', $(this));

});

function rotate(m, o) {
  var id = "#" + $(o).attr("id");
  var menu = $(m);

  menu.removeClass('r0 lr1 lr2 rr1 rr2');

  if (id == "#email") {
    menu.addClass("lr2");
  }
  if (id == "#photo") {
    menu.addClass('lr1');

  }
  if (id == "#cloud") {
    menu.addClass('r0');
  }
  if (id == "#portfolio") {
    menu.addClass('rr1');
  }
  if (id == "#settings") {
    menu.addClass('rr2');
  }


}

function swap(o) {
  var id = "#" + $(o).attr("id");
  var cimg = new String();
  var burl = "http://grantcr.com/files/",
  ext = ".png";
  cimg = id + " img";
  console.log($(cimg).attr("src"));

  if (id == "#email") {
    var nimg = burl + "iemailh" + ext;
    $(cimg).attr("src", nimg);
  }
  if (id == "#photo") {
    var nimg = burl + "photosh" + ext;
    $(cimg).attr("src", nimg);
  }
  if (id == "#cloud") {
    var nimg = burl + "icloudh" + ext;
    $(cimg).attr("src", nimg);
  }
  if (id == "#portfolio") {
    var nimg = burl + "portfolioh" + ext;
    $(cimg).attr("src", nimg);
  }
  if (id == "#settings") {
    var nimg = burl + "settingsh" + ext;
    $(cimg).attr("src", nimg);
  }

}

function swapBack(o) {
  var id = "#" + $(o).attr("id");
  var cimg = new String();
  var burl = "http://grantcr.com/files/",
  ext = ".png";
  cimg = id + " img";
  console.log($(cimg).attr("src"));

  if (id == "#email") {
    var nimg = burl + "iemail" + ext;
    $(cimg).attr("src", nimg);
  }
  if (id == "#photo") {
    var nimg = burl + "iphoto" + ext;
    $(cimg).attr("src", nimg);
  }
  if (id == "#cloud") {
    var nimg = burl + "icloud" + ext;
    $(cimg).attr("src", nimg);
  }
  if (id == "#portfolio") {
    var nimg = burl + "portfolio" + ext;
    $(cimg).attr("src", nimg);
  }
  if (id == "#settings") {
    var nimg = burl + "settings" + ext;
    $(cimg).attr("src", nimg);
  }

}
    </script>
</body>
</html>

7. By Night Fury

Made by Night Fury. Circle menu with click to expand effect. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>

<style>
#cont {
 font:12px;
 color:#f2f2f2;
 text-align:center;
 position:fixed; left:50%; top: 40%;
 margin-left: -25px;
}
.icon {
  width:50px;
  height:50px;
  line-height:50px;
	background:#1abc9c;
	border-radius:50%;
  position:relative;
  cursor:pointer;
  z-index:999;
}
.icon span {
 display:block;
 position:absolute; left:25%;
 width:50%; height:4px;
 border-radius:4px;
 background:#f2f2f2;
 opacity:1;
 transform:rotate(0deg);
 transition:0.25s ease-in-out;
}
.icon span:nth-child(1) {top:14px;}
.icon span:nth-child(2), .icon span:nth-child(3) {top:50%; margin-top:-2px;}
.icon span:nth-child(4) {bottom:14px;}
.icon.iconOpened span:nth-child(1) {width:0; top:50%; left:50%;}
.icon.iconOpened span:nth-child(4) {width:0; bottom:50%; left:50%;}
.icon.iconOpened span:nth-child(2) {transform:rotate(45deg);}
.icon.iconOpened span:nth-child(3) {transform:rotate(-45deg);}

.menu {position:relative; left:25px; top:-25px;}
.menu-item {
 width:30px; height:30px; line-height:30px;
 border-radius:50%;
 position:absolute; left:0; top:0;
 opacity:0; display:none;
 margin-top:-15px; margin-left:-15px;
}
.menu-item a {
 display:block;
 text-decoration:none;
 color:#f2f2f2;
}
</style>
</head>
<body>
  <h1 style="text-align: center;">Circle Menu</h1>
<div id="cont">
  <div class="icon">+</div>
  <div class="menu">
    <div class="menu-item" style="background:#2ecc71;"><a href="#">A</a></div>
    <div class="menu-item" style="background:#3498db;"><a href="#">B</a></div>
    <div class="menu-item" style="background:#9b59b6;"><a href="#">C</a></div>
    <div class="menu-item" style="background:#34495e;"><a href="#">D</a></div>
    <div class="menu-item" style="background:#27ae60;"><a href="#">E</a></div>
    <div class="menu-item" style="background:#2980b9;"><a href="#">F</a></div>
    <div class="menu-item" style="background:#8e44ad;"><a href="#">G</a></div>
    <div class="menu-item" style="background:#2c3e50;"><a href="#">H</a></div>
  </div>
</div>
<script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdn.jsdelivr.net/jquery.easing/1.3/jquery.easing.1.3.min.js'></script>
      <script>
$(function () {
  var icon = $('.icon'),
  menu = $('.menu');
  createMenu(icon, menu);
});


function createMenu(icon, menu) {
  //icon stylize
  icon.html('<span/><span/><span/><span/>');

  //menu stylize
  menu.addClass('menuClosed');

  var elem = menu.children('div');
  var l = elem.length;

  var opts = {
    startAng: 0, //degree
    range: 360, //degree
    radius: 70, //pixel
    nextTime: 50, //ms, time for next content to reveal, 0 for all at once
    animTime: 300, //ms, time for animation
    easingShow: 'easeOutBack', //limited strings
    easingHide: 'easeInBack' //limited strings
  };

  var n = opts.range == 360 ? l : l - 1;
  var interval = opts.range / n;

  var tarX = [],tarY = [];
  for (var i = 0; i < l; i++) {if (window.CP.shouldStopExecution(0)) break;
    var ang = (interval * i + opts.startAng) * Math.PI / 180;

    tarX[i] = Math.round(Math.cos(ang) * opts.radius);
    tarY[i] = Math.round(Math.sin(ang) * opts.radius);
  }window.CP.exitedLoop(0);

  icon.click(function (e) {
    if (menu.is('.menuClosed')) {
      for (var i = 0; i < l; i++) {if (window.CP.shouldStopExecution(1)) break;
        (function (j) {
          setTimeout(function () {
            elem.eq(j).show().animate({
              'left': tarX[j],
              'top': tarY[j],
              'opacity': 1 },
            opts.animTime, opts.easingShow, function () {
              if (j == l - 1) {
                menu.removeClass('menuClosed').addClass('menuOpened');
                icon.addClass('iconOpened');
              }
            });
          }, opts.nextTime * j);
        })(i);
      }window.CP.exitedLoop(1);
    } else if (menu.is('.menuOpened')) {
      for (var i = l - 1; i >= 0; i--) {if (window.CP.shouldStopExecution(2)) break;
        (function (j) {
          setTimeout(function () {
            elem.eq(j).animate({
              'left': 0,
              'top': 0,
              'opacity': 0 },
            opts.animTime, opts.easingHide, function () {
              $(this).hide();

              if (j == 0) {
                menu.removeClass('menuOpened').addClass('menuClosed');
                icon.removeClass('iconOpened');
              }
            });
          }, opts.nextTime * (l - j - 1));
        })(i);
      }window.CP.exitedLoop(2);
    }
    e.preventDefault();
  });
}
    </script>
</body>
</html>

8. By Kreso Galic

Made by Kreso Galic. Fab Circle menu with sliding animation. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  
<style>
html, body {
  height: 100%;
  background: #F6FDFF;
}

.fab {
  display: block;
  width: 100%;
  height: 100%;
}
.fab button {
  outline: none;
  background: #0076D9;
  border: none;
  border-radius: 100%;
  width: 50px;
  height: 50px;
  font-size: 2rem;
  color: white;
  z-index: 101;
  transition: all 1s cubic-bezier(0, 0.74, 0.16, 1.39);
}
.fab button.fab-trigger {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  outline: none;
  z-index: 9999;
}
.fab button.fab-trigger.open {
  background: transparent;
  color: #FC3A21;
}
.fab .fab-actions {
  width: 0px;
  height: 0px;
  border: 3px solid #0076D9;
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  z-index: 1000;
  margin: auto;
  border-radius: 100%;
  opacity: 0;
  visibility: hidden;
  transition: all 0.5s cubic-bezier(0.78, 0.34, 0.3, 0.79);
}
.fab .fab-actions.open {
  opacity: 1;
  visibility: visible;
  width: 200px;
  height: 200px;
}
.fab .fab-actions.open button.top {
  position: absolute;
  left: 50%;
  top: -25px;
  transform: translateX(-50%);
}
.fab .fab-actions.open button.left {
  position: absolute;
  left: -25px;
  top: 50%;
  transform: translateY(-50%);
}
.fab .fab-actions.open button.bottom {
  position: absolute;
  left: 50%;
  bottom: -25px;
  transform: translateX(-50%);
}
.fab .fab-actions.open button.right {
  position: absolute;
  right: -25px;
  top: 50%;
  transform: translateY(-50%);
}
.fab .fab-actions button.top {
  position: absolute;
  left: 50%;
  top: 75px;
  transform: translateX(-50%);
}
.fab .fab-actions button.left {
  position: absolute;
  left: 75px;
  top: 50%;
  transform: translateY(-50%);
}
.fab .fab-actions button.bottom {
  position: absolute;
  left: 50%;
  bottom: 75px;
  transform: translateX(-50%);
}
.fab .fab-actions button.right {
  position: absolute;
  right: 75px;
  top: 50%;
  transform: translateY(-50%);
}
</style>
</head>
<body>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">

<div class="fab">
  <button class="fab-trigger" id="trigger"><i class="material-icons trigger-icon">add</i></button>
  <div class="fab-actions">
     <button class="top"><i class="material-icons">hot_tub</i></button>
    <button class="right"><i class="material-icons">pool</i></button>
    <button class="bottom"><i class="material-icons">beach_access</i></button>
    <button class="left"><i class="material-icons">free_breakfast</i></button>
  </div>
</div>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
      <script>
$("#trigger").click(function () {
  $(this).toggleClass('open');
  $('.fab-actions').toggleClass('open');
  $('i.trigger-icon').html($('i.trigger-icon').text() == 'add' ? 'clear' : 'add');

});
    </script>
</body>
</html>