sidebar-js v1.0.4
Sidebar
Create sidebar/sidenav experiance in pure javascript.
npm install sidebar-js --saveOptions
| Option | Default | Type | Description |
|---|---|---|---|
documentMinSwipeX | 10 | Number | Minimum swipe in px required to trigger listener: open |
documentSwipeRange | 40 | Number | Range in px where document is listening for gesture: open |
nativeSwipe | true | Boolean | Open and close sidebar with swipe gestures |
nativeSwipeOpen | true | Boolean | Enable/Disable open on swipe |
position | 'left' | String | Sidebar position, accepted values: left\right |
var rightSidebarjs = new SidebarJS('navbar', {
documentMinSwipeX: 10,
documentSwipeRange: 40,
nativeSwipe: true,
nativeSwipeOpen: true,
position: 'left',
});Implementation - Superfast explanation
Insert sidebarjs.css and sidebarjs.js in your index.html file and create a tag (div, aside or what you prefer) with the attribute sidebarjs. All contents you will write inside tagsidebarjs will be rendered inside the sidebar. For open/close the sidebar, put wherever you want the sidebarjs-toggle attribute. Then simply init it with new SidebarJS("sidebarjs") and you are ready!
Implementation - Explanation step by step
Download files
Download and save all files
$ npm install sidebar-js --saveInsert sidebarjs.css and sidebarjs.js in your index.html.
Create SidebarJS element
Write sidebarjs attribute inside a tag (div, aside, or whatever you want).
<div sidebarjs>
<div>Title</div>
<nav>
<a href="link">Home</a>
<a href="link">About</a>
<a href="link">Contacts</a>
</nav>
</div>Trigger button
Do you need a trigger button for open/close SidebarJS? Just put sidebarjs-toggle attribute inside a tag and it's done!
<div sidebarjs-toggle>Open/Close</div>Init
When you have files, sidebarjs and sidebarjs-toggle you can init your SidebarJS Module like:
var sidebarjs = new SidebarJS("sidebarjs")Full file example
<head>
<link rel="stylesheet" href="your/path/sidebarjs.css">
</head>
<body>
<div id="navbar-toggle">Open/Close</div>
<div id="navbar">
<div>Title</div>
<nav>
<a href="link">Home</a>
<a href="link">About</a>
<a href="link">Contacts</a>
</nav>
</div>
<script src="your/path/sidebarjs.js"></script>
<script>
// Init SidebarJS
var sidebarjs = new SidebarJS("#navbar");
</script>
</body>