SidebarJS

Create mobile sidebar/sidenav experiance in pure javascript.

npm install sidebarjs --save

Demo

Open the demo on your device and try the touch gestures!

Libraries

Import

Typescript

import {SidebarElement, SidebarService} from 'sidebarjs';

ES6

import {SidebarElement, SidebarService} from 'sidebarjs';

Require

const {SidebarElement, SidebarService} = require('sidebarjs');

Classic

<script src="your/path/sidebarjs.js"></script>

Options

const sidebarjs = new SidebarElement({
    component?: HTMLElement['sidebarjs'], // Sidebar DOM element
    documentMinSwipeX?: 10, // Minimum swipe in px required to trigger listener: open
    documentSwipeRange?: 40, // Range in px where document is listening for gesture: open
    nativeSwipe?: true, // Open and close sidebar with swipe gestures
    nativeSwipeOpen?: true, // Enable/Disable open on swipe
    position?: 'left', // Sidebar position, accepted values: left|right
})

Single Sidebar

<head>

  <link rel="stylesheet" href="sidebarjs.min.css">

</head>
<body>

  <div sidebarjs-toggle>Open/Close</div>

  <div sidebarjs>
    <nav>
      <a href="link">Home</a>
      <a href="link">About</a>
      <a href="link">Contacts</a>
    </nav>
  </div>

  <script src="sidebarjs.min.js"></script>
  <script>
  // Init SidebarJS
  var sidebarjs = new SidebarJS.SidebarElement();
  </script>

</body>

Multiple Sidebars

<head>

  <link rel="stylesheet" href="sidebarjs.min.css">

</head>
<body>

  <div sidebarjs-toggle="leftSidebarName">Open/Close Left Sidebar</div>
  <div sidebarjs-toggle="rightSidebarName">Open/Close Right Sidebar</div>

  <div sidebarjs="leftSidebarName">
    <nav>
      <a href="link">My</a>
      <a href="link">Left</a>
      <a href="link">Content</a>
    </nav>
  </div>

  <div sidebarjs="rightSidebarName">
    <nav>
      <a href="link">My</a>
      <a href="link">Right</a>
      <a href="link">Content</a>
    </nav>
  </div>

  <script src="sidebarjs.min.js"></script>
  <script>
  var leftSidebarjs = new SidebarJS.SidebarElement({
    component: document.querySelector('[sidebarjs="leftSidebarName"]'),
  });
  
  var rightSidebarjs = new SidebarJS.SidebarElement({
    component: document.querySelector('[sidebarjs="rightSidebarName"]'),
    position: 'right',
  });
  </script>

</body>

Implementation step by step

Download files

Download and save all files

$ npm install sidebarjs --save

Insert sidebarjs.min.css and sidebarjs.min.js in your index.html.

<head>

  <link rel="stylesheet" href="your/path/sidebarjs.min.css">

</head>
<body>

  <script src="your/path/sidebarjs.min.js"></script>

</body>

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:

const sidebarjs = new SidebarJS.SidebarElement()

Full file example

<head>

  <link rel="stylesheet" href="your/path/sidebarjs.min.css">

</head>
<body>

  <div sidebarjs-toggle>Open/Close</div>

  <div sidebarjs>
    <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.min.js"></script>
  <script>
    // Init SidebarJS
    const sidebarjs = new SidebarJS.SidebarElement();
  </script>

</body>

stereochrome / sidebarjs Goto Github PK

sidebarjs's Introduction

SidebarJS

Demo

Libraries

Import

Options

Single Sidebar

Multiple Sidebars

Implementation step by step

Download files

Create SidebarJS element

Trigger button

Init

Full file example

sidebarjs's People

Contributors

Watchers

Recommend Projects

Recommend Topics

Recommend Org

Jobs