Lightweight Offcanvas Push Navigation In JavaScript – pusha

Category: Javascript , Menu & Navigation | September 12, 2019
Views Total:1,579 views
Official Page:Go to website
Last Update:September 12, 2019


Lightweight Offcanvas Push Navigation In JavaScript – pusha


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">
        <ul class="menu">
          <li><a href="#">Menu 1</a></li>
          <li><a href="#">Menu 2</a></li>
          <li><a href="#">Menu 3</a></li>
      <button class="btn pusha-panel__close" data-close>Close</button>

Initialize the offcanvas menu.

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

Open/close/toggle the offcanvas menu.;

Check if the offcanvas menu is opened.


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) {}

You Might Be Interested In:

Leave a Reply