Press "Enter" to skip to content

Create Mobile Sidebar/Sidenav in Pure Javascript | SidebarJS

Create a mobile sidebar experience / sidenav – SidebarJS is a JavaScript library used to create off-board drawer navigation as you have seen it in mobile apps.

responsive sidebar hamburger menu, mmenu alternative, sidebar navigation examples, mmenu options, mobile menu examples, menu js examples

How to make use of it:

Installation:

# NPM
$ npm install sidebarjs --save

Import the JavaScript file sidebar.js in your HTML doc.

<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 a component to toggle the drawer navigation.

<div class="js-sidebar--open">Toggle</div>

Style the drawer navigation with the next 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 achieved.

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,

Mobile App-like Drawer Navigation, SidebarJS Plugin/Github


See Demo And Download

Official Website(SidebarJS): Click Here

This superior jQuery/javascript plugin is developed by SidebarJS. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *