/ Circular Menu

Navigation: hamburger circular menu

Navigation: hamburger circular menu

Circular Menu, Navigation, Hamburger

Navigation: hamburger circular menu

Made with

Html
Css/SCSS
Javascript

Html

nav.circular-menu
  input#circular-menu.circular-menu__button(type='checkbox' href='javascript: void 0')
  label.circular-menu__icon(for='circular-menu')
    span.hamburger.hamburger-bar-1
    span.hamburger.hamburger-bar-2
    span.hamburger.hamburger-bar-3
  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

Css

*, *::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 = .08s
$delay-interval = .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 .2s
  width 80px

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

  &__button
    display none

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

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

        &-bar-2
          transform translate3d(0, 0, 0) scale(.1, 1)

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

    &:checked ~ ^[0]__item
      transition-timing-function cubic-bezier(.935, 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 .4s
    transition-timing-function cubic-bezier(.175, .885, .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 .2s

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

      &-bar-2
        transform translate3d(0, 0, 0)

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

  &__item
    $shape()

    font-size 32px

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

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

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

Author

Shyam Chen

Demo

See the Pen Circular Menu, Navigation, Hamburger by Shyam Chen (@Shyam-Chen) on CodePen.

CodeTea

A Nice collection of often useful examples done in HTML JavaScript CSS.

Read More