Material Navigation Pure CSS

index.pug

form
  input(type='radio' name='tab')#menu
  .container
    input(type='radio' name='tab' checked)#home
    section.home
      h1 Home
      label(for='home')
    input(type='radio' name='tab')#about
    section.about
      h1 About
      label(for='about')
    input(type='radio' name='tab')#work
    section.work
      h1 Work
      label(for='work')
    input(type='radio' name='tab')#contact
    section.contact
      h1 Contact
      label(for='contact')
  .menu
    div
      label(for='menu')
      label(for='home')

material-navigation-pure-css.markdown

Material Navigation Pure CSS

Inspired by: http://codepen.io/jeffmccarthyesq/pen/wBdvKp?editors=0100 I challenged myself to do this in completely CSS

A Pen by Manasseh Pierce on CodePen.

License.

style.stylus

pa = #f9f9f9
home = #2196F3
about = #FFC107
work = #4CAF50
contact = #F44336

body
  margin 0
  padding 0
  font-weight 300
  font-family 'Raleway', sans-serif
  background #fff
  background radial-gradient(ellipse at center, rgba(0,0,0,0) 0%,rgba(0,0,0,0.05) 80%, rgba(0,0,0,0.15) 100%)
  overflow hidden
  transform-style preserve-3d

input[type='radio'], .hide
  display none

input[type='radio']:checked + section
  top 0

.container
  width 100%
  height 100vh
  transition all 500ms
  transform-style preserve-3d
  section
    position absolute
    top 100vh
    width 100%
    height 100vh
    transition top 500ms
    transform-style preserve-3d
    &.home
      background home
    &.about
      background about
    &.work
      background work
    &.contact
      background contact
    h1
      margin 0
      font-size 64px
      transform translate(0, 40vh)
      text-align center
      color rgba(255,255,255,0.85)
      transition transform 500ms
      transform-style preserve-3d
    label
      display block
      position absolute
      top 0
      width 100%
      height 100vh

.menu
  display block
  position fixed
  top 20px
  left 25px
  z-index 1000
  transform (0deg)
  transition all 500ms
  width 35px
  height 4px
  background rgba(0,0,0,0.25)
  &::before, &::after
    content ''
    display block
    position absolute
    width 35px
    height 4px
    background rgba(0,0,0,0.25)
    transition all 500ms
  &::before
    top 10px
  &::after
    top 20px
  &:hover
    background white
    &::before, &::after
      background white
  div, div label:nth-child(1)
    display block
    width 35px
    height 35px
    position absolute
    top -6px
  div label:nth-child(2)
    display none

#menu:checked + .container
  transform scale(0.65) translateY(-18%)
  transition all 500ms
  transform-style preserve-3d
  section
    cursor pointer
    overflow hidden
    opacity 1
    box-shadow 0 0 40px rgba(0,0,0,0.25)
    transform-style preserve-3d
    h1
      transform scale(0.5)
      transform-style preserve-3d

#menu:checked + .container + .menu
  top 30px
  left 20px
  transform rotate(225deg)
  transition all 500ms
  transform-origin center center
  background #646464
  &::before, &::after
    background #646464
    transition all 500ms
  &::before
    opacity 0
    transition opacity 0s
  &::after
    margin-top -20px
    transform rotate(90deg)
  div label:nth-child(2)
    display block
    width 35px
    height 35px
    position absolute
    top -6px
  div label:nth-child(1)
    display none

.container
  section.home
    z-index 99
  section.about
    z-index 98
  section.work
    z-index 97
  section.contact
    z-index 96

#menu:checked + .container
  section.home
    top 192px
    &:hover
      top 188px
  section.about
    top 132px
    &:hover
      top 128px
  section.work
    top 72px
    &:hover
      top 68px
  section.contact
    top 12px
    &:hover
      top 8px

styles

<link href="http://fonts.googleapis.com/css?family=Raleway:600,400,200,300" rel="stylesheet" />