chaoszone.cz/site/css/menu.scss

@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);
      }
    }
  }
}