@import "math"; // vars $fg:#ff0000; $bg:#00ff00; // config $menu-items: 5; $open-distance: 110px; $start-angle: (0 - pi()) / 2; $opening-angle: pi() + 0; .menu { //@extend %goo; $width:300px; $height:300px; //$width: 250px + (150px * abs(cos($start-angle))); //$height: 250px + (150px * abs(sin($start-angle))); position:fixed; //left:50%; display: inline-block; margin-left:-$width/2; padding-top:$height/2; padding-left:$width/2; padding-bottom:-$height/2; width:$width; height:$height; box-sizing:border-box; font-size:20px; text-align:left; } %ball { background: $bg; border-radius: 50%; width: 80px; height: 80px; margin-left: -40px; margin-top: -40px; position: absolute; top: 50%; color: white; text-align:center; line-height: 80px; transform: translate3d(0,0,0); transition:transform ease-out 200ms; svg { padding-top: 10px; width: 60px; height: 60px; } } .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-item { &:hover { background:#acffac; 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-timing-function:cubic-bezier(0.175, 0.885, 0.320, 1.0); 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() - pi())/2)+((pi()/($menu-items - 1))*($i - 1) + $start-angle); &:nth-child(#{$i+2}) { transition-duration:80ms+(80ms*$i); transform:translate3d(cos($angle)*$open-distance,sin($angle)*$open-distance,0); } } } @media screen and (max-width: 600px){ .menu { position: relative; padding-top: 0; padding-bottom: 0; height: 80px; width: 100%; } %ball { $dim: 1.4cm; width: $dim; height: $dim; line-height: $dim; svg { $dim: 1.2cm; padding-top: 0.1cm; width: $dim; height: $dim; } } .menu-open:checked~.menu-item{ transition-timing-function:cubic-bezier(0.165, 0.840, 0.440, 1.000); @for $i from 1 through $menu-items{ &:nth-child(#{$i+2}){ transition-duration:90ms+(100ms*$i); transform:translate3d(1.4cm*$i,0,0); } } } }