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); }
JAVASCRIPT
Expand for more options Login