Pure CSS3 Hamburgar Menu + Slide Menu

index.html

doctype html
html
  head
    meta(charset='UTF-8')
    title slide
  body
  
    input.nav-trigger(id="nav-trigger" type="checkbox")
    label(for="nav-trigger")
      span
      span
      span

    nav.navigation
      ul
        li: a(href="#") home
        li: a(href="#") about
        li: a(href="#") portfolio
        li: a(href="#") contact

    section.site-wrap
      h1 home
      p Slide Menu + Pure CSS3 Animation Icon
      ul
        li: a(href="http://codepen.io/SitePoint/pen/uIemr") Pure CSS Off-Screen Navigation Menu
        li: a(href="http://www.nxworld.net/tips/12-css-hamburger-menu-active-effect.html") CSSで実装するハンバーガーメニュークリック時のエフェクト 10＋ | NxWorld
        li: a(href="http://codepen.io/nxworld/pen/RPLLbm") CSS Menu Icons
        li: a(href="http://www.sitepoint.com/pure-css-off-screen-navigation-menu/") Pure CSS Off-screen Navigation Menu

Pure CSS3 Hamburgar Menu + Slide Menu.markdown

Pure CSS3 Hamburgar Menu + Slide Menu

A Pen by SENDA Keijiro (千田啓次郎) on CodePen.

License.

style.css

@import "compass"
@import "compass/css3/box-sizing"
@import "compass/css3/transform"

$menu_width: 10rem
$trigger_height: 40px
$trigger_width: 40px
$trigger_border: 4px 
$trigger_border_color: #000

body
  background: #666

.navigation
  ul
    // critical
    position: fixed
    width: 100%
    height: 100%
    top: 0
    left: 0
    z-index: 0
    // non-critical
    background: #6c6
    li
      display: block
      line-height: 2rem

.site-wrap
  // critical
  min-height: 100%
  min-width: 100%
  position: relative
  top: 0
  left: 0
  bottom: 100%
  z-index: 1
  // non-critical
  background: #fff
  padding: 0 8rem

.nav-trigger
  // critical
  position: absolute
  clip: rect(0, 0, 0, 0)
  
label[for="nav-trigger"]
  // critical
  position: fixed
  left: 1rem
  top: 1rem
  z-index: 2
  // non-critical
  height: $trigger_width
  width: $trigger_width
  cursor: pointer

  span
    position: absolute
    left: 0
    width: 100%
    height: $trigger_border
    background-color: $trigger_border_color
    border-radius: $trigger_border

    &:nth-of-type(1)
      top: 0
    &:nth-of-type(2)
      top: ($trigger_height / 2) - ($trigger_border / 2)
    &:nth-of-type(3)
      bottom: 0


/* Make the Magic Happen */
.nav-trigger + label, .site-wrap
  transition: left 0.2s

.nav-trigger:checked
  + label
    left: $menu_width + 1rem
    span
      transition: all .4s
      &:nth-of-type(1)
        +transform(translateY(18px) rotate(-45deg))
      &:nth-of-type(2)
        opacity: 0
      &:nth-of-type(3)
        +transform(translateY(-18px) rotate(45deg))
  ~ .site-wrap
    left: $menu_width
    box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.5)


/* Micro reset */
*, *:before, *:after
  +box-sizing(border-box)
  margin: 0
  padding: 0

html, body
  height: 100%
  width: 100%
  /* font-family: Helvetica, Arial, sans-serif */