Author: | G_4s |
---|---|
Views Total: | 10,887 views |
Official Page: | Go to website |
Last Update: | November 27, 2016 |
License: | MIT |
Preview:

Description:
A plain HTML/CSS sliding navigation that expands the hamburger icon into a sidebar menu when toggled.
How to use it:
Create the hamburger menu and insert it together with the checkbox based menu trigger into a container.
<span class="checkbox-container"> <input class="checkbox-trigger" type="checkbox" /> <span class="menu-content"> <ul> <li>Home</li> <li>About</li> <li>Contact</li> <li>Blog</li> <li>Social</li> </ul> <span class="hamburger-menu"></span> </span> </span>
Style the menu content in the CSS.
.checkbox-container { display: block; float: left; width: 50px; height: 50px; position: relative; background: #182825; } .menu-content { display: flex; background: #182825; color: white; float: left; } .menu-content ul { display: block; padding-left: 0; padding-top: 1em; padding-bottom: 1em; margin: 0; width: 0px; height: 0px; overflow: hidden; transition: height 0.3s ease 0.7s, width 0.7s ease; } .menu-content ul li { list-style: none; padding-top: 1em; padding-bottom: 1em; cursor: pointer; transition: color 0.5s, background 0.5s; } .menu-content ul li:hover { color: #0CD6AD; background: #1E332F; }
Style the hamburger trigger:
.checkbox-trigger { opacity: 0; position: absolute; width: 50px; height: 50px; left: 0px; cursor: pointer; z-index: 5; } .hamburger-menu, .hamburger-menu::before, .hamburger-menu::after { display: block; position: absolute; background: white; width: 40px; height: 4px; margin: 1.3em 3em; transition: background 0.3s; } .hamburger-menu::before, .hamburger-menu::after { content: ''; position: absolute; margin: -0.7em 0 0; transition: width 0.7s ease 0.3s, transform 0.7s ease 0.3s; } .hamburger-menu::after { margin-top: 0.7em; } .hamburger-menu { position: relative; display: block; margin: 0; margin-top: 1.45em; margin-right: 0.35em; margin-left: 0.35em; margin-bottom: 1.45em; transition: width 0.3s ease; }
The core CSS hacks to toggle the hamburger menu using checkbox.
.checkbox-trigger:checked { left: 202px; } .checkbox-trigger:checked + .menu-content .hamburger-menu { width: 2em; transition: width 0.7s ease 0.7s; } .checkbox-trigger:checked + .menu-content .hamburger-menu::before { width: 1.2em; transform: rotate(-35deg); margin-top: -0.4em; } .checkbox-trigger:checked + .menu-content .hamburger-menu::after { width: 1.2em; transform: rotate(35deg); margin-top: 0.4em; } .checkbox-trigger:checked + .menu-content ul { width: 200px; height: 200px; transition: width 0.7s ease 0.3s, height 0.3s ease; }