Author: | firstandthird |
---|---|
Views Total: | 19 views |
Official Page: | Go to website |
Last Update: | May 12, 2023 |
License: | MIT |
Preview:

Description:
offcanvas.js is a lightweight JavaScript library that helps developers quickly build a mobile-style off-canvas navigation (push menu) on your web app.
How to use it:
1. Install & build.
$ npm i offcanvas
$ npm install $ npm run-script build
2. Load the offcanvas.bundle.js
JavaScript library in the document.
<link rel="stylesheet" href="./offcanvas.css" /> <script src="./dist/offcanvas.bundle.js"></script>
3. Or import the offcanvas as an ES module.
@import 'offcanvas/offcanvas.css'; import 'offcanvas';
4. Create offcanvas menus on the page.
<div class="offcanvas left" data-offcanvas="navleft"> <p>This is the left nav</p> <button data-offcanvas-trigger="navleft">This will close the nav</button> </div> <div class="offcanvas right" data-offcanvas="navright"> <p>This is the right nav</p> </div>
5. Create trigger buttons to toggle the offcanvas menus.
<div class="offcanvas-content" data-offcanvas-content> <div class="buttons" data-offcanvas-fixed> <button data-offcanvas-trigger="navleft">Show left nav</button> <button data-offcanvas-trigger="navright">Show right nav</button> </div> ... main content here ... </div>
6. Wrap them into a container with the CSS class of offcanvas-wrapper
.
<div class="offcanvas-wrapper"> ... </div>
7. Enable the off-canvas menu only when running on mobile devices.
<div class="offcanvas right" data-offcanvas="navright" data-offcanvas-match="(max-width: 767px)"> <p>This is the right nav</p> </div>
Changelog:
v3.3.0 (05/12/2023)
- Firing event on hide/show