Author: | John-Muriu |
---|---|
Views Total: | 12,652 views |
Official Page: | Go to website |
Last Update: | May 5, 2020 |
License: | MIT |
Preview:

Description:
A hamburger sidebar navigation (also called off-canvas menu & push menu) built using checkbox input, CSS/CSS3, and Font Awesome icons.
How to use it:
1. Load the latest Font Awesome iconic font on the page.
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
2. Create the HTML for the sidebar navigation.
<div class="sidebar"> <header>My App</header> <ul> <li> <a href="#"><i class="fas fa-qrcode"></i>Dashboard</a> </li> <li> <a href="#"><i class="fas fa-link"></i>Shortcuts</a> </li> <li> <a href="#"><i class="fas fa-stream"></i>Overview</a> </li> <li> <a href="#"><i class="fas fa-calendar-week"></i>Events</a> </li> <li> <a href="#"><i class="far fa-question-circle"></i>About</a> </li> <li> <a href="#"><i class="fas fa-sliders-h"></i>Services</a> </li> <li> <a href="#"><i class="far fa-envelope"></i>Contact</a> </li> </ul> </div>
3. Create a hamburger toggle button from a checkbox input.
<input type="checkbox" id="check" /> <label for="check"> <i class="fas fa-bars" id="btn"></i> <i class="fas fa-times" id="cancel"></i> </label>
4. Style the sidebar navigation.
.sidebar { position: fixed; left: -250px; width: 250px; height: 100%; background: #042331; transition: all 0.5s ease; } .sidebar header { font-size: 22px; color: white; line-height: 70px; text-align: center; background: #063146; user-select: none; } .sidebar ul a { display: block; height: 100%; width: 100%; line-height: 65px; font-size: 20px; color: white; padding-left: 40px; box-sizing: border-box; border-bottom: 1px solid black; border-top: 1px solid rgba(255, 255, 255, 0.1); transition: 0.4s; } ul li:hover a { padding-left: 50px; } .sidebar ul a i { margin-right: 16px; }
5. Enable the hamburger toggle button.
#check { display: none; } label #btn, label #cancel { position: absolute; background: #042331; border-radius: 3px; cursor: pointer; } label #btn { left: 40px; top: 25px; font-size: 1px; color: white; padding: 6px 12px; transition: all 0.5s; } label #cancel { z-index: 1111; left: -195px; top: 17px; font-size: 30px; color: #0a5275; padding: 4px 9px; transition: all 0.5s ease; } #check:checked ~ .sidebar { left: 0; } #check:checked ~ label #btn { left: 250px; opacity: 0; pointer-events: none; } #check:checked ~ label #cancel { left: 195px; } #check:checked ~ section { margin-left: 250px; }