Author: | SidebarJS |
---|---|
Views Total: | 199 views |
Official Page: | Go to website |
Last Update: | December 29, 2022 |
License: | MIT |
Preview:

Description:
SidebarJS is a standalone JavaScript library used to create an off-canvas drawer navigation as you seen on Mobile apps.
Installation:
# NPM $ npm install sidebarjs --save
How to use it:
Import the JavaScript file sidebar.js in your html document.
<script src="sidebar.js"></script>
The html structure for the drawer navigation.
<aside class="js-sidebar"> <div class="js-sidebar--container"> <h3 class="sidebar--title">Drawer Navigation</h3> <nav class="sidebar--menu"> <div class="sidebar--menu-link--group"> <a class="sidebar--menu-link" href="#!">Item 1</a> <a class="sidebar--menu-link" href="#!">Item 2</a> <a class="sidebar--menu-link" href="#!">Item 3</a> </div> <div class="sidebar--menu-link--group"> <a class="sidebar--menu-link" href="#!">Item 4</a> <a class="sidebar--menu-link" href="#!">Item 5</a> <a class="sidebar--menu-link" href="#!">Item 6</a> <a class="sidebar--menu-link" href="#!">Item 7</a> <a class="sidebar--menu-link" href="#!">Item 8</a> </div> </nav> </div> <div class="js-sidebar--background"></div> </aside>
Create an element to toggle the drawer navigation.
<div class="js-sidebar--open">Toggle</div>
Style the drawer navigation with the following CSS snippets.
.js-sidebar, .js-sidebar--background { top: 0; left: 0; width: 100%; height: 100%; } .js-sidebar--background { -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .js-sidebar--open { height: 44px; color: #FFF; background: #2196F3; -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); -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); display: -webkit-flex; -webkit-align-items: center; -webkit-justify-content: center; display: flex; align-items: center; justify-content: center; } .js-sidebar { position: fixed; z-index: 9999; -moz-transform: translate(-100%, 0); -ms-transform: translate(-100%, 0); -webkit-transform: translate(-100%, 0); transform: translate(-100%, 0); -moz-transition: -moz-transform 0s ease 0.3s; -o-transition: -o-transform 0s ease 0.3s; -webkit-transition: -webkit-transform 0s ease; -webkit-transition-delay: 0.3s; transition: transform 0s ease 0.3s; } .js-sidebar--background { position: absolute; background: transparent; } .js-sidebar--container { position: relative; z-index: 1; width: 90%; max-width: 300px; height: 100%; background: #FFF; display: -webkit-flex; -webkit-flex-direction: column; display: flex; flex-direction: column; -moz-box-shadow: 2px 0 20px rgba(0, 0, 0, 0.2), 1px 0 10px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 2px 0 20px rgba(0, 0, 0, 0.2), 1px 0 10px rgba(0, 0, 0, 0.1); box-shadow: 2px 0 20px rgba(0, 0, 0, 0.2), 1px 0 10px rgba(0, 0, 0, 0.1); -moz-transform: translate(-100%, 0); -ms-transform: translate(-100%, 0); -webkit-transform: translate(-100%, 0); transform: translate(-100%, 0); } .js-sidebar--container .sidebar--title { height: 150px; min-height: 150px; padding: 16px; background: #2196F3; color: white; font-size: 32px; line-height: 100%; display: -webkit-flex; -webkit-align-items: flex-end; display: flex; align-items: flex-end; } .js-sidebar--container .sidebar--menu { overflow: auto; } .js-sidebar--container .sidebar--menu-link--group { border-top: 1px solid rgba(0, 0, 0, 0.1); display: -webkit-flex; -webkit-flex-direction: column; display: flex; flex-direction: column; } .js-sidebar--container .sidebar--menu-link { padding: 16px; } .js-sidebar.is-visible { -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); -moz-transition: -moz-transform 0s ease 0s; -o-transition: -o-transform 0s ease 0s; -webkit-transition: -webkit-transform 0s ease; -webkit-transition-delay: 0s; transition: transform 0s ease 0s; } .js-sidebar.is-visible .js-sidebar--background { background: rgba(0, 0, 0, 0.2); }
Create a new instance of SidebarJS() and done.
var sidebarjs = new SidebarJS();
Possible options with default values.
// Sidebar DOM element component?: <HTMLElement>sidebarjs, // Minimum swipe in px required to trigger listener: open documentMinSwipeX?: 10, // Range in px where document is listening for gesture: open documentSwipeRange?: 40, // Open and close sidebar with swipe gestures nativeSwipe?: true, // Enable/Disable open on swipe nativeSwipeOpen?: true, // Sidebar position, accepted values: left|right position?: 'left', // Backdrop opacity on sidebar open backdropOpacity?: 0.3, // Show sidebar on screen > 1024px responsive?: false, // Page content if sidebar has option responsive mainContent?: <HTMLElement> // Function called after sidebar is open onOpen?: () => void, // Function called after sidebar is close onClose?: () => void, // Function called when sidebar change visibility onChangeVisibility?: (changes: { isVisible: boolean }) => void,
Changelog:
v10.0.0 (12/29/2022)
- update all deps and change build process
v9.0.0 (07/20/2020)
- update all dev deps
v8.0.0 (05/15/2020)
- update deps + export SidebarPosition as value
v7.0.0 (12/08/2020)
- Add transition-start|end classes to detect open/close actions via DOM
v6.1.0 (08/04/2018)
- build(npm): update devDependencies
v6.0.0 (03/30/2018)
- refactor(build): move npm scripts to specific node file, change dist folder to lib folder
- refactor(npm): release script
- docs: updated README
- build: refactor build system
- chore(demo): update lib path
v5.4.0 (12/02/2018)
- added a simple function for set swype on or off while running
v5.3.0 (09/04/2018)
- Update
v5.2.1 (05/31/2018)
- Bug Fixes and Performance Improvements
v5.2.0 (05/31/2018)
- SidebarElement: responsive option