Pure CSS3 menu button effect.
A Pen by Nathan Schmidt on CodePen.
<h1>Pure CSS3 menu button</h1> | |
<div class="menu-box"> | |
<input type="checkbox" id="menu" /> | |
<label for="menu" class="menu-text"> | |
</label> | |
</div> | |
<p>Click the menu button to see the effect.</p> | |
<p>I created this after reading - <a href="http://exisweb.net/menu-eats-hamburger" target="_blank" >Hamburger vs Menu: The Final AB Test</a></p> |
@import "compass/css3"; | |
h1{ | |
text-align: center; | |
} | |
p{ | |
text-align: center; | |
} | |
a{ | |
color: 147ea5; | |
text-decoration: none; | |
} | |
.menu-box{ | |
height:15px; | |
width:40px; | |
margin:50px auto; | |
border: 2px solid #147ea5; | |
padding: 10px; | |
position:relative; | |
overflow: hidden; | |
} | |
.menu-box input[type=checkbox] { | |
display:none; | |
} | |
.menu-box label { | |
cursor:pointer; | |
height:100%; | |
width:100%; | |
position:absolute; | |
z-index:99; | |
top:10px; | |
left:0; | |
} | |
.menu-box input ~ .menu-text:before { | |
height: 100%; | |
width: 100%; | |
text-align: center; | |
font-size: 0.9em; | |
content: "MENU"; | |
display: block; | |
@include transition(all, 0.2s, ease-in-out); | |
} | |
.menu-box input[type=checkbox]:checked ~ .menu-text:before { | |
@include transform(translate(0px, -36px) scale(1, 0.2)); | |
@include transition(all, 0.2s, ease-in-out); | |
} | |
.menu-box input ~ .menu-text:after { | |
height: 100%; | |
width: 100%; | |
text-align: center; | |
font-size: 0.9em; | |
content: "CLOSE"; | |
display: block; | |
@include transform(translate(0px, 0px) scale(1, 0.2)); | |
@include transition(all, 0.2s, ease-in-out); | |
} | |
.menu-box input[type=checkbox]:checked ~ .menu-text:after { | |
@include transform(translate(0px, -36px) ); | |
@include transition(all, 0.2s, ease-in-out); | |
} |