Lightweight Offcanvas Push Navigation In JavaScript – pusha

Preview:

Description:

pusha is a lightweight JavaScript plugin to create an off-canvas side menu that slides out from the left/right/top/bottom of the screen while pushing the page content to the other side.

More features:

• Close on ESC.
• Close on click outside.
• Disable body scroll when the menu is opened.
• Custom styles via SCSS.

How to use it:

Import the compiled JavaScript and CSS files into the HTML page.

<link rel="stylesheet" href="dist/css/pusha-demo.min.css" />
<script src="dist/js/pusha.min.js"></script>

Create the HTML for the offcanvas menu. You can decide where to place the offcanvas menu using the following CSS classes:

• pusha-panel–left
• pusha-panel–right
• pusha-panel–top
• pusha-panel–bottom

<div class="pusha-panel pusha-panel--left" aria-hidden="true">
  <div class="pusha-panel__content">
    <div class="pusha-panel__inner">
      <nav>
        <ul class="menu">
          <li><a href="#">Menu 1</a></li>
          <li><a href="#">Menu 2</a></li>
          <li><a href="#">Menu 3</a></li>
        </ul>
      </nav>
      <button class="btn pusha-panel__close" data-close>Close</button>
    </div>
  </div>
</div>

Initialize the offcanvas menu.

var menuLeft = new Pusha('.pusha-panel--left');

Open/close/toggle the offcanvas menu.

menuLeft.open();
menuLeft.close();
menuLeft.toggle();

Check if the offcanvas menu is opened.

menuLeft.isOpen;

Possible options to customize the offcanvas menu. Pass the following options object as the second parameter to the Pusha method.

var menuLeft = new Pusha('.pusha-panel--left',{
    closeOnEsc: true,
    closeOnClick: true,
    disableOverscroll: true,
    disableBodyscroll: false,
    activeClass: 'pusha-active'
});

Callback functions.

var menuLeft = new Pusha('.pusha-panel--left',{
    onOpen: function(panel) {},
    onClose: function(panel) {}
});