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

Category: Javascript , Menu & Navigation | July 20, 2018
Author:toomuchdesign
Views Total:540 views
Official Page:Go to website
Last Update:July 20, 2018
License:MIT

Preview:

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

Description:

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

You Might Be Interested In:


Leave a Reply