Author: | nigeljaure |
---|---|
Views Total: | 3,618 views |
Official Page: | Go to website |
Last Update: | December 18, 2017 |
License: | MIT |
Preview:

Description:
This is a minimalist off-canvas push navigation which reveals a sidebar menu while pushing the main content to the right when activated. Built with CSS and a little bit of JavaScript.
How to use it:
Create a hamburger menu toggle button together with the side menu on the webpage.
<span class="open-side"> <a href="#" onclick="openSideMenu()"> <svg width="30" height="30"> <path d="M0,5 30,5" stroke="#fff" stroke-width="5"/> <path d="M0,14 30,14" stroke="#fff" stroke-width="5"/> <path d="M0,23 30,23" stroke="#fff" stroke-width="5"/> </svg> </a> </span> <div id="side-menu" class="side-nav"> <a href="#" class="btn-close" onclick="closeSideMenu()">×</a> <a href="#">Home</a> <a href="#">About</a> <a href="#">Services</a> <a href="#">Contact</a> </div>
Insert your main content into the document.
<div id="main"> <h1>Side Menu</h1> </div>
The primary CSS styles.
.side-nav { height: 100%; width: 0; position: fixed; z-index: 1; top: 0; left: 0; background-color: #111; opacity: 0.9; overflow-x: hidden; padding-top: 60px; transition: 0.5s; } .side-nav a { padding: 10px 10px 10px 30px; text-decoration: none; font-size: 22px; color: #ccc; display: block; transition: 0.3s; } .side-nav a:hover { color: #008080; } .side-nav .btn-close { position: absolute; top: 0; right: 22px; font-size: 36px; margin-left: 50px; } #main { transition: margin-left 0.5s; padding: 20px; overflow: hidden; width: 100%; }
The main JavaScript to toggle CSS classes as you open/close the side menu.
function openSideMenu(){ document.getElementById('side-menu').style.width ='250px'; document.getElementById('main').style.marginLeft ='250px'; } function closeSideMenu(){ document.getElementById('side-menu').style.width ='0'; document.getElementById('main').style.marginLeft ='0'; }
The syntax highlighting doesn’t work from reader, I realize this after clicking the link to the post. Nice article!