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

Category: Javascript , Menu & Navigation | July 20, 2018
Views Total:574 views
Official Page:Go to website
Last Update:July 20, 2018


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">
      <li><a href="#">Menu Item 1</a></li>
      <li><a href="#">Menu Item 2</a></li>
      <li><a href="#">Menu Item 3</a></li>

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

<div id="container">
  <h1>Page Title</h1>
  <!-- Menu Toggle Button -->
  <div class="menu-btn offside-button">Menu</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
    // 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
// oepn;
// close
// close all
// destroy

v1.4.0 (07/20/2018)

  • Inject offside factory not relying on global window object

You Might Be Interested In:

Leave a Reply