Unnamed Menu - CSS

index.html

<div class="base">
   <div class="menu">
      <div class="icon">
         <div class="bar"></div>
      </div>
   </div>
   <div class="icons">
      <i class="fa fa-user" aria-hidden="true"></i>
      <i class="fa fa-calendar-o" aria-hidden="true"></i>
      <i class="fa fa-tachometer" aria-hidden="true"></i>
   </div>
   <div class="section">
      <div class="cover1">
         <div class="cover2">
            <a class="content" href="#calender"></a>
         </div>
      </div>
   </div>
   <a class="section-static top" href="#profile"></a>
   <a class="section-static bottom" href="#dashboard"></a>
</div>

script.js

$(".menu").click(function(){
   $(this).parent().toggleClass("close");
});

//Based on: https://dribbble.com/shots/3377940-Home-Budget-App-Interactions

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://codepen.io/OfficialAntarctica/pen/2677821722cd9e02c2c882a17c5b2072.js?2"></script>

style.scss

$m: #21264B;
$iconmargin: 35px;
//Took about 100 more lines than I expected
body {
   background-color: $m;
   overflow-x:hidden;
   .base {
      z-index: 90;
      position: fixed;
      top: 0px;
      left: 0px;
      background-color: #FFFFFF;
      width: 98px;
      height: 98px;
      transition: all 1s cubic-bezier(0.50, -0.75, 0.05, 1);
      border-bottom-right-radius: 100%;
      //overflow:hidden;
      .menu {
         z-index: 100;
         background-color: #FFFFFF;
         position: absolute;
         top: 0px;
         left: 0px;
         width: 100px;
         height: 100px;
         border-bottom-right-radius: 200px;
         cursor: pointer;
         transition: all 1s cubic-bezier(0.50, -0.75, 0.05, 1), background-color 1s ease;
         .icon {
            position: absolute;
            width: 25px;
            height: 25px;
            top: 50%;
            left: 50%;
            transform: translate(-100%, -100%);
            &:before,
            &:after {
               content: '';
               transform: rotate(0deg);
               transition: top 0.5s ease 0.5s, transform 0.5s ease, background-color 0.75s ease 0.25s;
            }
            .bar,
            &:before,
            &:after {
               position: absolute;
               height: 5px;
               left: 0px;
               right: 0px;
               border-radius: 5px;
               background-color: $m;
            }
            .bar {
               transition: opacity 0s linear 0.5s, background-color 0.75s ease 0.25s;
               opacity: 1;
               top: 10px;
            }
            &:before {
               top: 0px;
            }
            &:after {
               top: initial;
               top: 20px;
            }
         }
      }
      .icons {
         z-index: 98;
         position: absolute;
         top:0px;
         left:0px;
         >* {
            position: absolute;
            font-size:40px;
            color:$m;
            transition: 0.3s cubic-bezier(0.50, -0.25, 0.05, 1);
         }
         .fa-user {
            top:$iconmargin;
            left:0px;
            transition-delay:0.2s;
         }
         .fa-calendar-o {
            top:0px;
            left:0px;
            color:#fff;
            transition-delay:0.1s;
         }
         .fa-tachometer {
            top:0px;
            left:$iconmargin;
         }
      }
      .section { //Overview of the arc: https://codepen.io/k-ya/pen/qrgZpx
         z-index: 96;
         position: absolute;
         top:0px;
         left:0px;
         height:0px;
         width:0px;
         transform-origin: 100% 100%;
         transform:rotate(135deg);
         .cover1 {
            transform-origin: 100% 100%;
            &,
            .cover2,
            .cover2 .content {
               position: absolute;
               width: 600px;
               height: 600px;
            }
            &,
            .cover2 {
               top: 50%;
               left: 50%;
               transform: translate(-100%, -100%) rotate(4deg);
               overflow: hidden;
               pointer-events:none;
               transition:transform 0.5s ease-in;
            }
            .cover2 {
               transform: translate(50%, -50%) rotate(-8deg);
               transform-origin: 0% 100%;
               .content {
                  width: 150px;
                  height: 150px;
                  border-radius: 100%;
                  background-color: #EE1B59;
                  top: 100%;
                  left: 0%;
                  transform: translate(-50%, -50%);
                  transition: background-color 0s, width 1.5s cubic-bezier(0.50, -0.5, 0.05, 1) 0s, height 1.5s cubic-bezier(0.50, -0.5, 0.05, 1) 0s;
                  pointer-events: auto;
               }
            }
         }
      }
      .section-static {
         z-index: 94;
         width:100px;
         height:100px;
         position: absolute;
         top:0px;
         left:0px;
         transform-origin:0% 0%;
         transition: width 1s cubic-bezier(0.50, -0.75, 0.05, 1), height 1s cubic-bezier(0.50, -0.75, 0.05, 1);
         &:hover {
            background-color:#EAEAEA;
         }
         &.top {
            transform:rotate(-45deg);
            border-bottom-right-radius: 400px;
         }
         &.bottom {
            transform:rotate(45deg);
            border-bottom-right-radius:400px;
         }
      }
      &.close {
         width: 300px;
         height: 300px;
         transition: all 1.25s cubic-bezier(0.50, 0, 0.05, 1.75);
         .menu {
            width: 150px;
            height: 150px;
            transition: all 1s cubic-bezier(0.50, 0, 0.05, 1.75), background-color 1s ease;
            background-color: $m;
            .icon {
               .bar,
               &:before,
               &:after {
                  background-color: #FFFFFF;
               }
               .bar {
                  opacity: 0;
               }
               &:before,
               &:after {
                  transition: top 0.5s linear, transform 0.5s ease 0.5s, background-color 0.75s ease 0.25s;
               }
               &:before {
                  top: 10px;
                  transform: rotate(-45deg);
               }
               &:after {
                  top: 10px;
                  transform: rotate(45deg);
               }
            }
         }
         .icons {
            position: absolute;
            top:0px;
            left:0px;
            >* {
               position: absolute;
               font-size:40px;
               color:$m;
               transition: 0.3s cubic-bezier(0.50, 0, 0.05, 1.75) 0.7s;
               pointer-events:none;
            }
            .fa-user {
               top:$iconmargin;
               left:200px;
            }
            .fa-calendar-o {
               top:141px;
               left:141px;
               color:#fff;
               transition-delay:0.65s;
            }
            .fa-tachometer {
               top:200px;
               left:$iconmargin;
               transition-delay:0.8s;
            }
         }
         .section {
            .cover1 {
               transform-origin: 100% 100%;
               &,
               .cover2,
               .cover2 .content {
                  position: absolute;
                  width: 600px;
                  height: 600px;
               }
               &,
               .cover2 {
                  top: 50%;
                  left: 50%;
                  transform: translate(-100%, -100%) rotate(16deg);
                  overflow: hidden;
                  transition:transform 0.5s ease-in 0.5s;
               }
               .cover2 {
                  transform: translate(50%, -50%) rotate(-32deg);
                  transform-origin: 0% 100%;
                  .content {
                     border-radius: 100%;
                     background-color: #EE1B59;
                     top: 100%;
                     left: 0%;
                     transform: translate(-50%, -50%);
                     transition: background-color 0s, width 1.1s cubic-bezier(0.50, 0, 0.05, 1.75) 0.25s, height 1.1s cubic-bezier(0.50, 0, 0.05, 2) 0.25s;
                     &:hover {
                        background-color:#DD1350;
                     }
                  }
               }
            }
         }
         .section-static {
            width:300px;
            height:300px;
            transition: width 1.25s cubic-bezier(0.50, 0, 0.05, 2), height 1.25s cubic-bezier(0.50, 0, 0.05, 2);
         }
      }
   }
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

unnamed-menu-css.markdown

Unnamed Menu - CSS

https://dribbble.com/shots/3377940-Home-Budget-App-Interactions

A Pen by Zoë on CodePen.

License.