Author: | devsloveit |
---|---|
Views Total: | 3,639 views |
Official Page: | Go to website |
Last Update: | December 21, 2016 |
License: | MIT |
Preview:

Description:
Just another CSS solution to create a sidebar off-canvas navigation using plain HTML and CSS transitions and transforms.
How to use it:
Download the zip and import the style sheet off-canvas.css in the header of the html page.
<link rel="stylesheet" href="off-canvas.css">
The primary HTML structure for the sidebar nav and trigger element.
<div class="d-off-canvas-wrapper d-example"> <input type="checkbox" id="d-off-canvas-trigger"> <label for="d-off-canvas-trigger" class="d-off-canvas-trigger"> <span>Trigger</span> </label> <label for="d-off-canvas-trigger" class="d-off-canvas-helper"></label> <div class="d-off-canvas" data-comes-from="right"> Here goes your content. </div> </div>
Style the sidebar navigation in the CSS.
.d-example .d-off-canvas { max-width: 320px; background-color: red; }
Style the background overlay when the sidebar navigation is active.
.d-off-canvas-helper { background-color: black; }