Author: | harshiv7 |
---|---|
Views Total: | 5,831 views |
Official Page: | Go to website |
Last Update: | July 18, 2019 |
License: | MIT |
Preview:

Description:
A mobile-first, off-canvas sidebar navigation (push menu) system written in pure CSS/CSS3 and checkbox tricks.
How to use it:
Code the HTML for the side navigation.
<aside id="sidebar"> <header class="navbar-header"> <a href="#" class="brand-logo"> Brand Logo </a> </header> <main class="navbar-body"> <ul> <li class="nav-item"> <a href="" class="nav-link"> Menu Item 1 </a> </li> <li class="nav-item"> <a href="" class="nav-link"> Menu Item 2 </a> </li> <li class="nav-item"> <a href="" class="nav-link"> Menu Item 3 </a> </li> ... </ul> </main> </aside>
Create a checkbox input to toggle the side navigation.
<input type="checkbox" name="checkbox" id="checkbox">
Create a menu toggle button inside the main content.
<main id="main-content"> <label for="checkbox" class="check-box"> <span class="line line1"></span> <span class="line line3"></span> <span class="line line2"></span> </label> <h1>Main Content Here</h1> </main>
The primary CSS for the side navigation.
#sidebar { padding: 20px 0; background-color: #3F51B5; width: 220px; visibility: visible; opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); -webkit-transition: 250ms ease-in; transition: 250ms ease-in; -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); } #sidebar .navbar-header { display: -webkit-box; display: -ms-flexbox; display: flex; padding: 10px 20px; } #sidebar .navbar-header .brand-logo { font-size: 1.5em; -webkit-transform: translateX(0); transform: translateX(0); -webkit-transition: 250ms ease-in; transition: 250ms ease-in; visibility: visible; } .navbar-body .nav-item { padding: 10px 20px; cursor: pointer; -webkit-transition: 400ms all ease-in-out; transition: 400ms all ease-in-out; -webkit-transform: translateX(0); transform: translateX(0); } .navbar-body .nav-item:hover { background-color: #7280ce; }
Toggle the side navigation using checkbox and label tricks.
#checkbox { display: none; } #checkbox:checked ~ #sidebar { width: 0; -webkit-animation: sidebarAnim 500ms; animation: sidebarAnim 500ms; } #checkbox:checked ~ #sidebar .nav-item { -webkit-transform: translateX(-200px); transform: translateX(-200px); } #checkbox:checked ~ #sidebar .brand-logo { -webkit-transform: translateX(-200px); transform: translateX(-200px); visibility: hidden; } #checkbox:checked ~ #sidebar .navbar-header { visibility: hidden; }
Style the menu toggle button.
#main-content .check-box { cursor: pointer; display: inline-block; } #main-content .check-box .line { width: 20px; height: 2px; background-color: #212121; margin: 4px 0; display: block; }
The CSS animations for the side navigation.
@-webkit-keyframes sidebarAnim { 0% { width: 220px; opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); visibility: visible; } 50% { width: 220px; } 100% { width: 0; opacity: 0; -webkit-transform: translateX(-220px); transform: translateX(-220px); visibility: hidden; } } @keyframes sidebarAnim { 0% { width: 220px; opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); visibility: visible; } 50% { width: 220px; } 100% { width: 0; opacity: 0; -webkit-transform: translateX(-220px); transform: translateX(-220px); visibility: hidden; } }