nav.circular-menu
  input#circular-menu.circular-menu__button(type='checkbox' href='javascript: void 0' checked)
  label.circular-menu__icon(for='circular-menu')
    .hamburger.hamburger-bar
    .hamburger.hamburger-bar
    .hamburger.hamburger-bar
  a.circular-menu__item(href='#'): i.fa.fa-chrome
  a.circular-menu__item(href='#'): i.fa.fa-firefox
  a.circular-menu__item(href='#'): i.fa.fa-edge
  a.circular-menu__item(href='#'): i.fa.fa-safari
  a.circular-menu__item(href='#'): i.fa.fa-opera
View Compiled
*, *::before, *::after
  box-sizing border-box

body
  background #fce4ec
  position absolute
  left 50%
  top 40%

/* ------------------------- Separate line ------------------------- */

$shape-color = #fff
$shape-background = #dc143c
$shape-color-hover = #dc143c
$shape-background-hover = #f08080
$shape-color-active-focus = #8b0000
$menu-items = 5
$hamburger-spacing = 8px
$delay-init = 0.08s
$delay-interval = 0.1s
$open-distance = 105px

$shape()
  background $shape-background
  border-radius 100%
  box-shadow 0 2px 5px rgba(0, 0, 0, 0.25)
  color $shape-color
  height 80px
  line-height 80px
  margin-left -40px
  position absolute
  text-align center
  top 20px
  transform translate3d(0, 0, 0)
  transition transform ease-out 0.2s
  width 80px

.circular-menu
  font-size 20px
  width 400px
  height 250px
  margin-left -(@width / 2)
  margin-top 5rem
  padding-left (@width / 2)
  padding-top @font-size

  &__button
    display none

    &:checked + ^[0]__icon
      transform scale(0.8, 0.8) translate3d(0, 0, 0)
      transition-duration 0.2s
      transition-timing-function linear

      & > .hamburger
        &-bar:nth-child(1)
          transform translate3d(0, 0, 0) rotate(45deg)

        &-bar:nth-child(2)
          transform translate3d(0, 0, 0) scale(0.1, 1)

        &-bar:nth-child(3)
          transform translate3d(0, 0, 0) rotate(-45deg)

    &:checked ~ ^[0]__item
      transition-timing-function cubic-bezier(0.935, 0, 0.34, 1.33)

      for i in 1..($menu-items)
        $pi = PI
        $opening-angle = $pi * 2
        $angle = ($pi - $opening-angle) / 2 + $opening-angle / ($menu-items) * (i - 1)

        &:nth-of-type({i})
          transition-duration ($delay-init + $delay-interval * i)
          transform translate3d(cos($angle) * $open-distance, sin($angle) * $open-distance, 0)

  &__icon
    $shape()

    cursor pointer
    transform scale(1.1, 1.1) translate3d(0, 0, 0)
    transition-duration 0.4s
    transition-timing-function cubic-bezier(0.175, 0.885, 0.32, 1.275)
    z-index 2

    &:hover
      transform scale(1.2, 1.2) translate3d(0, 0, 0)

    & > .hamburger
      background $shape-color
      display block
      width 25px
      height 3px
      left 50%
      margin-left -(@width / 2)
      margin-top -(@height / 2)
      position absolute
      top 50%
      transition transform 0.2s

      &-bar:nth-child(1)
        transform translate3d(0, -($hamburger-spacing), 0)

      &-bar:nth-child(2)
        transform translate3d(0, 0, 0)

      &-bar:nth-child(3)
        transform translate3d(0, $hamburger-spacing, 0)

  &__item
    $shape()
    font-size 32px

    for i in 1..($menu-items)
      &:nth-of-type({i})
        transition-duration 0.18s

    &:hover
      color $shape-color-hover
      background $shape-background-hover

    &:active
    &:focus
      color $shape-color-active-focus
View Compiled

External CSS

  1. https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.