Author: | jlnljn |
---|---|
Views Total: | 3,459 views |
Official Page: | Go to website |
Last Update: | August 24, 2016 |
License: | MIT |
Preview:

Description:
Just another pure CSS/CSS3 burger menu that slides out a fullscreen navigation menu when toggled.
How to use it:
Create a nav list as follow:
<nav> <ul> <li><a href="#">Link #1</a></li> <li><a href="#">Link #2</a></li> <li><a href="#">Link #3</a></li> </ul> </nav>
The html for the hamburger menu toggle.
<input id="burger" type="checkbox" /> <label for="burger"> <span></span> <span></span> <span></span> </label>
The primary CSS for the hamburger menu toggle.
input + label { position: fixed; top: 40px; right: 40px; height: 20px; width: 15px; z-index: 5; } input + label span { position: absolute; width: 100%; height: 2px; top: 50%; margin-top: -1px; left: 0; display: block; background: #020304; transition: .5s; } input + label span:first-child { top: 3px; } input + label span:last-child { top: 16px; } label:hover { cursor: pointer; } input:checked + label span { opacity: 0; top: 50%; } input:checked + label span:first-child { opacity: 1; transform: rotate(405deg); } input:checked + label span:last-child { opacity: 1; transform: rotate(-405deg); }
Style the navigation menu with the following CSS:
input ~ nav { background: white; position: fixed; top: 0; left: 0; width: 100%; height: 100px; z-index: 3; transition: .5s; transition-delay: .5s; overflow: hidden; } input ~ nav > ul { text-align: center; position: absolute; top: 35%; left: 20%; right: 20%; } input ~ nav > ul > li { opacity: 0; transition: .5s; transition-delay: 0s; } input ~ nav > ul > li > a { text-decoration: none; text-transform: uppercase; color: #020304; font-weight: 700; font-family: sans-serif; display: block; padding: 30px; } input:checked ~ nav { height: 100%; transition-delay: 0s; } input:checked ~ nav > ul > li { opacity: 1; transition-delay: .5s; }