Hamburger Menu (using :checked)
HTML
<input id="menu" type="checkbox">
<label for="menu"></label>
CSS
html {
height: 100%;
}
body {
background: #222;
}
#menu {
visibility: hidden;
}
label {
width: 100px;
height: 15px;
border-radius: 5px;
background: #fff;
cursor: pointer;
transition: .6s;
position: fixed;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -7.5px;
}
label:before {
content: "";
width: 100px;
height: 15px;
background: #fff;
position: absolute;
transform: translateY(-30px);
-webkit-transform: translateY(-30px);
border-radius: 5px;
-webkit-transition: .6s;
transition: .6s;
}
label:after {
content: "";
width: 100px;
height: 15px;
background: #fff;
position: absolute;
transform: translateY(30px);
-webkit-transform: translateY(30px);
border-radius: 5px;
transition: .6s;
-webkit-transition: .6s;
}
#menu:checked + label {
width: 0;
}
#menu:checked + label:before {
transform: rotate(45deg) translate(0px);
-webkit-transform: rotate(45deg) translate(0px);
}
#menu:checked + label:after {
transform: rotate(-45deg) translate(0px);
-webkit-transform: rotate(-45deg) translate(0px);
}
