Off-canvas Push Menu with JavaScript and CSS3 Transforms – offside

offside is a JavaScript library that uses CSS3 transforms to slide in an off-canvas menu while pushing the main page to the other side.

Great for creating an App style navigation system for your desktop & mobile website.

How to use it:

Import the offside.css in the head section.

<link rel="stylesheet" href="path/to/offside.css">

Create an off-canvas menu from an html unordered list that follows the html structure like this:

<nav id="menu-demo" class="offside">
  <ul>
      <li><a href="#">Menu Item 1</a></li>
      <li><a href="#">Menu Item 2</a></li>
      <li><a href="#">Menu Item 3</a></li>
      ...
  </ul>
</nav>

Create a link inside your main content to toggle the off-canvas menu.

<div id="container">
  <h1>Page Title</h1>
  <p>...</p>
  <!-- Menu Toggle Button -->
  <div class="menu-btn offside-button">Menu</div>
  <p>...</p>
  
</div>

Import the offside.js at the bottom of the webpage to improve the page load speed.

<script src="path/to/offside.js"></script>

Initialize the off-canvas push menu with options.

var offsideMenu1 = offside( '#menu-demo', {
    // Sliding elements selectors
    slidingElementsSelector:'#container',
    // toggle button selector
    buttonsSelector: '.menu-btn',
    // left or right
    slidingSide: 'left',
   // Disable CSS 3d Transforms support (for testing purposes)
   disableCss3dTransforms: false
    
});

Callback functions available.

// Function: After init callback
init: function(){},
// Function: Before open callback
beforeOpen: function(){},
// Function: After open callback
afterOpen: function(){},  
// Function: Before close callback                        
beforeClose: function(){},
// Function: After close callback 
afterClose: function(){}

API methods.

// toggle
offsideMenu1.toggle();
// oepn
offsideMenu1.open();
// close
offsideMenu1.close();
// close all
offsideMenu1.closeAll();
// destroy
offsideMenu1.destroy();

v1.4.0 (07/20/2018)

• Inject offside factory not relying on global window object