Untitled

dabblet.css

ul, li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu {
  position: fixed;
  bottom: 0;
  left: 50%;
  width: 8em;
  height: 4em;
  margin-left: -4em;
  overflow: hidden;
  font-size: 50px;
}

.menu li {
  position: absolute;
  visibility: hidden;
  width: 4em;
  height: 4em;
  transition: transform .3s;
  transform-origin: 100% 100%;
}

.menu-open li .label {
   position: absolute;
   z-index: 1;
   bottom: 12%;
   left: 15%;
   color: #f30;
   opacity: .5;
   text-shadow:1px 1px 1px #fff;
   font-size: .8em;
   cursor: pointer;
}
.menu li .bg {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  transform-origin: 100% 100%;
  transform: skew(54deg);
}

.menu li .bg i {
   position: absolute;
   top: 0;
   left: 0;
   right: -100%;
   bottom: -100%;
   border-radius: 100%;
   transform: skew(-54deg);
   background-color: #f60;   
   opacity: .8;
   cursor: pointer;
}
.menu li .bg:hover i {
  opacity: 1;
}

.menu li:nth-child(1) {  transform: rotate(0deg) scale(.2); }
.menu li:nth-child(2) {  transform: rotate(36deg) scale(.2); }
.menu li:nth-child(3) {  transform: rotate(72deg) scale(.2); }
.menu li:nth-child(4) {  transform: rotate(108deg) scale(.2); }
.menu li:nth-child(5) {  transform: rotate(144deg) scale(.2); }

.menu li:nth-child(2) .bg i {  background-color: #f70; }
.menu li:nth-child(3) .bg i {  background-color: #f80; }
.menu li:nth-child(4) .bg i {  background-color: #f90; }
.menu li:nth-child(5) .bg i {  background-color: #fa0; }




.menu .switch  {
  position: absolute;
  width: 4em;
  height: 4em;
  left: 50%;
  bottom: 0;
  text-align: center;
  line-height: 2.2em;
  margin: 0 0 -2em -2em;
  border-radius: 100%;
  background:#fff;
  cursor: pointer;
  transition: box-shadow .3s;
}

.menu .switch:before  {
  content: "+";
  position: absolute;
  margin: .25em 0 0 -.25em;;
}

.menu-open li {
  visibility: visible;
}

.menu-open .switch {
  box-shadow: 0 0 50px rgba(0, 0, 0, .5);
}

.menu-open .switch:before  {
  content: "-";
  position: absolute;
  margin: .25em 0 0 -.15em;;
}


.menu-open li:nth-child(1) {  transform: rotate(0deg) scale(1); }
.menu-open li:nth-child(2) {  transform: rotate(36deg) scale(1); }
.menu-open li:nth-child(3) {  transform: rotate(72deg) scale(1); }
.menu-open li:nth-child(4) {  transform: rotate(108deg) scale(1); }
.menu-open li:nth-child(5) {  transform: rotate(144deg) scale(1); }

dabblet.html

<h1>$200的环形菜单</h1>
(webkit only)
<div class="menu">
<ul>
<li><div class="label">&#9733;</div><span class="bg"><i></i></span>
<li><div class="label">&#9733;</div><span class="bg"><i></i></span>
<li><div class="label">&#9733;</div><span class="bg"><i></i></span>
<li><div class="label">&#9733;</div><span class="bg"><i></i></span>
<li><div class="label">&#9733;</div><span class="bg"><i></i></span>
</ul>
<div class="switch"></div>
</div>

dabblet.js

document.querySelector('.switch').onclick = function() {
  document.querySelector('.menu').classList.toggle('menu-open');
}

settings.json

{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}