Uses checkbox to open the menu
A Pen by Håvard Brynjulfsen on CodePen.
%label | |
%input{"type"=> "checkbox"} | |
%span.menu | |
%span.hamburger | |
%ul | |
%li | |
%a{"href"=>"#"} Home | |
%li | |
%a{"href"=>"#"} About | |
%li | |
%a{"href"=>"#"} Work | |
%h1 Click the hamburger icon to view the effect |
@import url('https://fonts.googleapis.com/css?family=Cutive+Mono'); | |
*, | |
*:before, | |
*:after { | |
box-sizing: border-box; | |
} | |
html { | |
font-size: 18px; | |
} | |
body { | |
font-family: "Cutive Mono", serif; | |
font-size: 1.2em; | |
line-height: 1.6; | |
background: #CCC; | |
overflow-x: hidden; | |
} | |
label { | |
.menu { | |
position: absolute; | |
right: -100px; | |
top: -100px; | |
z-index: 100; | |
width: 200px; | |
height: 200px; | |
background: #FFF; | |
border-radius: 50% 50% 50% 50%; | |
transition: .5s ease-in-out; | |
box-shadow: 0 0 0 0 #FFF, 0 0 0 0 #FFF; | |
cursor: pointer; | |
} | |
.hamburger { | |
position: absolute; | |
top: 135px; | |
left: 50px; | |
width: 30px; | |
height: 2px; | |
background: #000; | |
display: block; | |
transform-origin: center; | |
transition: .5s ease-in-out; | |
&:after, | |
&:before { | |
transition: .5s ease-in-out; | |
content: ""; | |
position: absolute; | |
display: block; | |
width: 100%; | |
height: 100%; | |
background: #000; | |
} | |
&:before { | |
top: -10px; | |
} | |
&:after { | |
bottom: -10px; | |
} | |
} | |
input { | |
display: none; | |
} | |
input:checked + .menu { | |
box-shadow: 0 0 0 100vw #FFF, 0 0 0 100vh #FFF; | |
border-radius: 0; | |
.hamburger { | |
transform: rotate(45deg); | |
&:after { | |
transform: rotate(90deg); | |
bottom: 0; | |
} | |
&:before { | |
transform: rotate(90deg); | |
top: 0; | |
} | |
} | |
} | |
input:checked + .menu + ul { | |
opacity: 1; | |
} | |
ul { | |
z-index: 200; | |
position: absolute; | |
top: 50%; | |
left: 50%; | |
transform: translate(-50%,-50%); | |
opacity: 0; | |
transition: .25s 0s ease-in-out; | |
} | |
a { | |
margin-bottom: 1em; | |
display: block; | |
color: #000; | |
text-decoration: none; | |
} | |
} | |
h1 { | |
position: absolute; | |
top: 50%; | |
left: 50%; | |
transform: translate(-50%,-50%); | |
width: 80%; | |
text-align: center; | |
} |