Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Material Navigation Pure CSS
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')
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
<link href="http://fonts.googleapis.com/css?family=Raleway:600,400,200,300" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment