<nav>

  <div class="outer_menu">
    <input class="checkbox_toggle" type="checkbox" />
    <div class="hamburger">
      <div></div>
    </div>
    <div class="menu">
      <div>
        <div>
          <ul>
            <li><a href="#">About</a></li>
            <li><a href="#">Products</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">Contact</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>

</nav>

// необязательно nav
nav
  position: relative
  height: 50px
  background-color: green

/* begin menu */

$max-width: 1000
$hamburger-menu-size: 60px
$hamburger-menu-border-radius: .12em
$hamburger-menu-bg-color: rgba(255,255,255,.75)
$hamburger-menu-color: #5d257c
$hamburger-menu-line-height: 2px
$hover-line-height: $hamburger-menu-line-height
$content-bg-color: rgba(93,37,124,.97)
$content-color: #fff
$hover-color: darken($content-color,10%)
$anim-duration: .4s

.outer_menu
  a,
  a:visited,
  a:hover,
  a:active
    color: inherit
    text-decoration: none

.outer_menu
  font-size: 14px
  position: absolute
  top: 0
  left: 0
  z-index: 99

  .checkbox_toggle
    position: absolute
    top: 0
    left: 0
    z-index: 2
    cursor: pointer
    width: $hamburger-menu-size
    height: $hamburger-menu-size
    opacity: 0

    &:checked
      & + .hamburger
        > div
          transform: rotate(135deg)

          &:before,
          &:after
            top: 0
            transform: rotate(90deg)

          &:after
            opacity: 0

      & ~ .menu
        pointer-events: auto
        visibility: visible

        > div
          transform: scale(1)
          transition-duration: .75s

          > div
            opacity: 1
            transition: opacity $anim-duration ease $anim-duration

    &:hover + .hamburger
      box-shadow: inset 0 0 10px rgba(0, 0, 0, .1)

    &:checked:hover + .hamburger > div
      transform: rotate(225deg)

  .hamburger
    display: none
    position: absolute
    top: 0
    left: 0
    z-index: 1
    width: $hamburger-menu-size
    height: $hamburger-menu-size
    padding: .5em 1em
    background: $hamburger-menu-bg-color
    border-radius: 0 $hamburger-menu-border-radius $hamburger-menu-border-radius 0
    cursor: pointer
    transition: box-shadow $anim-duration ease
    backface-visibility: hidden
    +r($max-width)
      display: block

    > div
      position: relative
      flex: none
      width: 100%
      height: $hamburger-menu-line-height
      background: $hamburger-menu-color
      transition: all $anim-duration ease
      top: 20px

      &:before,
      &:after
        content: ''
        position: absolute
        z-index: 1
        top: -$hamburger-menu-size / 6
        left: 0
        width: 100%
        height: $hamburger-menu-line-height
        background: inherit
        transition: all $anim-duration ease

      &:after
        top: $hamburger-menu-size / 6

  .menu
    position: fixed
    top: 0
    left: 0
    width: 100%
    height: 100%
    pointer-events: none
    overflow: hidden
    backface-visibility: hidden
    outline: 1px solid transparent
    +r($max-width)
      visibility: hidden

    > div
      width: 100vw
      height: 100vw
      color: $content-color
      transition: all $anim-duration ease
      flex: none
      backface-visibility: hidden
      overflow: hidden
      +r($max-width)
        transform: scale(0)
        background: $content-bg-color

      > div
        text-align: center
        max-width: 90vw
        max-height: 100vh
        transition: opacity $anim-duration ease
        overflow: hidden
        flex: none
        +r($max-width)
          opacity: 0

        > ul
          list-style: none
          padding: 0 1em
          margin: 0
          display: block
          max-height: 100vh

          > li
            padding: 0
            margin: 1em
            font-size: 24px
            display: inline-block
            +r($max-width)
              display: block

            > a
              position: relative
              display: inline-block
              cursor: pointer
              transition: color $anim-duration ease

              &:hover
                color: $hover-color

                &:after
                  width: 100%

              &:after
                content: ''
                position: absolute
                z-index: 1
                bottom: -.15em
                left: 0
                width: 0
                height: $hover-line-height
                background: $hover-color
                transition: width $anim-duration ease

/* end menu */