Elegant Off-canvas Navigation In Vanilla JavaScript – Canvi.js

Canvi.js is a standalone vanilla JavaScript used to create elegant, configurable, push and/or overlay off-canvas navigation for your cross-platform web application.

Install the Canvi.js via NPM:

$ npm install canvi --save

How to use it:

Insert the Canvi.js’s files into your project.

<link rel="stylesheet" href="/path/to/canvi.css">
<script src="/path/to/canvi.js"></script>

Create the html for your off-canvas navigation.

<aside class="myCanvasNav canvi-navbar">
  <div class="canvi-user-info">
    <div class="canvi-user-info__image">
       <img src="logo.jpg">
    </div>
    <div class="canvi-user-info__data">
        <span class="canvi-user-info__title">Title</span>
        <a href="#" target="_blank" class="canvi-user-info__meta">View site</a>
        <div class="canvi-user-info__close" onclick="t.close();"></div>
    </div>
  </div>
  <ul class="canvi-navigation">
      <li>
          <a href="#" target="_blank" class="canvi-navigation__item">
              <span class="canvi-navigation__icon-wrapper" style="background: #00adff;">
                  <span class="canvi-navigation__icon icon-iconmonstr-code-2"></span>
              </span>
              <span class="canvi-navigation__text">Laravel</span>
          </a>
      </li>
      <li>
          <a href="#" target="_blank" class="canvi-navigation__item">
              <span class="canvi-navigation__icon-wrapper" style="background: #0082BF;">
                  <span class="canvi-navigation__icon icon-iconmonstr-code-5"></span>
              </span>
              <span class="canvi-navigation__text">CSS</span>
          </a>
      </li>
      <li>
          <a href="#" target="_blank" class="canvi-navigation__item">
              <span class="canvi-navigation__icon-wrapper" style="background: #00567F;">
                  <span class="canvi-navigation__icon icon-iconmonstr-code-9"></span>
              </span>
              <span class="canvi-navigation__text">HTML</span>
          </a>
      </li>
      <li>
          <a href="#" target="_blank" class="canvi-navigation__item">
              <span class="canvi-navigation__icon-wrapper" style="background: #002B40;">
                  <span class="canvi-navigation__icon icon-iconmonstr-code-11"></span>
              </span>
              <span class="canvi-navigation__text">JavaScript</span>
          </a>
      </li>
      <li>
          <a href="#" target="_blank" class="canvi-navigation__item">
              <span class="canvi-navigation__icon-wrapper" style="background: #009CE5;">
                  <span class="canvi-navigation__icon icon-iconmonstr-code-13"></span>
              </span>
              <span class="canvi-navigation__text">Vue.js</span>
          </a>
      </li>
  </ul>
</aside>

Insert your main content (e.g. nav toggle button) to a container with the CSS class of ‘canvi-content’.

<main class="canvi-content">
  <button class="canvi-open-button">Open The Navigation</button>
</main>

Initialize the canvi.js library and done.

var t = new Canvi()

Available customization options.

var t = new Canvi({
    content: '.canvi-content',
    isDebug: false,
    navbar: '.canvi-navbar',
    speed: '0.3s',
    openButton: '.canvi-open-button',
    position: 'left', // or right
    pushContent: true,
    width: '300px'
})

API methods.

var t = new Canvi()
// close
t.close();
// open
t.open();
// toggle
t.toggle();

Event handlers.

document.querySelector('body').addEventListener('canvi.init', function(e) {
  // on init
});
document.querySelector('body').addEventListener('canvi.before-open', function(e) {
  // before open  
});
document.querySelector('body').addEventListener('canvi.after-open', function(e) {
  // after open
});
document.querySelector('body').addEventListener('canvi.before-close', function(e) {
  // before close
});
document.querySelector('body').addEventListener('canvi.after-close', function(e) {
  // after close
});

Changelog:

v1.0.1 (02/08/2020)

• Fix multiple instance bug

10/10/2018

• Rewrite