@import "~sass-math/math"; //vars $fg: #ff4081; $bg: #3f51b5; $pi: pi(); //config $menu-items: 5; $open-distance: 115px; $opening-angle: $pi - .2; %goo { filter: url('#shadowed-goo'); // debug //background:rgba(255,0,0,0.2); } %ball { background: $fg; border-radius: 100%; width: 80px; height: 80px; margin-left: -40px; position: absolute; top: 20px; color: white; text-align: center; line-height: 80px; transform: translate3d(0, 0, 0); transition: transform ease-out 200ms; } .menu-open { display: none; } .menu-item { @extend %ball; } .hamburger { $width: 25px; $height: 3px; width: $width; height: $height; background: white; display: block; position: absolute; top: 50%; left: 50%; margin-left: -$width/2; margin-top: -$height/2; transition: transform 200ms; } $hamburger-spacing: 8px; .hamburger-1 { transform: translate3d(0, -$hamburger-spacing, 0); } .hamburger-2 { transform: translate3d(0, 0, 0); } .hamburger-3 { transform: translate3d(0, $hamburger-spacing, 0); } .menu-open:checked + .menu-open-button { .hamburger-1 { transform: translate3d(0, 0, 0) rotate(45deg); } .hamburger-2 { transform: translate3d(0, 0, 0) scale(0.1, 1); } .hamburger-3 { transform: translate3d(0, 0, 0) rotate(-45deg); } } .menu { @extend %goo; $width: 380px; $height: 250px; position: absolute; left: 50%; margin-left: -$width/2; padding-top: 20px; padding-left: $width/2; width: $width; height: $height; box-sizing: border-box; font-size: 20px; text-align: left; } .menu-item { &:hover { background: white; color: $fg; } @for $i from 1 through $menu-items { &:nth-child(#{$i+2}) { transition-duration: 10ms+(60ms*($i)); } } } .menu-open-button { @extend %ball; z-index: 2; transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275); transition-duration: 400ms; transform: scale(1.1, 1.1) translate3d(0, 0, 0); cursor: pointer; } .menu-open-button:hover { transform: scale(1.2, 1.2) translate3d(0, 0, 0); } .menu-open:checked + .menu-open-button { transition-timing-function: linear; transition-duration: 200ms; transform: scale(0.8, 0.8) translate3d(0, 0, 0); } .menu-open:checked ~ .menu-item { transition-timing-function: cubic-bezier(0.935, 0.000, 0.340, 1.330); @for $i from 1 through $menu-items { $angle: (($pi - $opening-angle)/2)+(($opening-angle/($menu-items - 1))*($i - 1)+($pi*0.43)); &:nth-child(#{$i+2}) { transition-duration: 80ms+(80ms*$i); transform: translate3d(sin($angle)*$open-distance, cos($angle)*$open-distance, 0); } } }