App-Like Side Menu Plugin With JavaScript – offside.js

Menu & Nav
Demo    Download
Offside.js-off-side-menu
File Size: 15.87 KB
Views Total: 323 views
Last Update:September 14, 2021
Publish Date: November 11, 2014
Official Website: Go to website
License: MIT
Plugin Author: toomuchdesign

Offside.js is a minimal JavaScript kit without used jQuery-library dependencies to push things off-canvas using just class manipulation. Its’s use easy & light weight for website and web applications.

Features :

  • Minimal DOM manipulations
  • No library dependencies
  • Uses CSS3 3D transforms (if you want to)
  • No injected style. Offside entirely relies on classes manipulations
  • BEM-like style
  • Degrades gracefully on browsers not supporting CSS3 3D transforms
  • Handles multiple off-canvas elements
  • Left/right off-canvas
  • Style agnostic
  • No need of extra classes or any specific markup.
  • Consumable as commonJS/ES module with a require('offside-js')

How to use :

Add css & js in html :

 <!-- Put these into the <head> -->
  <link rel="stylesheet" href="dist/offside.css">
  <script src="dist/offside.js"></script>

Add HTML code in page :

<!-- Off-canvas toggle button -->
  <button type="button" id="my-button">Offside toggle</button>

  <!-- Off-canvas element  -->
  <nav id="my-menu">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Projects</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>

  <!-- Your Content -->
  <div id="my-content-container">
    ...
  </div>

Hook up the plugin :

<!-- Put this right before the </body> closing tag -->
  <script>

    //Offside.js minimal setup
    var myOffside = offside( '#my-menu', {

        slidingElementsSelector:'#my-content-container',
        buttonsSelector: '#my-button, .another-button',
    });
  </script>

Customizable options :

var myOffside = offside( '#my-menu', {

      // Global offside options: affect all offside instances
      slidingElementsSelector: '#my-content-container', // String: Sliding elements selectors ('#foo, #bar')
      disableCss3dTransforms: false,                    // Disable CSS 3d Transforms support (for testing purposes)
      debug: true,                                      // Boolean: If true, print errors in console

      // Offside instance options: affect only this offside instance
      buttonsSelector: '#my-button, .another-button',   // String: Offside toggle buttons selectors ('#foo, #bar')
      slidingSide: 'right',                             // String: Offside element pushed on left or right
      init: function(){},                               // Function: After init callback
      beforeOpen: function(){},                         // Function: Before open callback
      afterOpen: function(){},                          // Function: After open callback
      beforeClose: function(){},                        // Function: Before close callback
      afterClose: function(){},                         // Function: After close callback    

  });

Done

List Of Version :
  • v1.4.0
  • v1.3.1
  • v1.3.0
  • 1.2.4
  • 1.2.3
  • 1.2.2
  • 1.2.1
  • 1.2.0
  • 1.1.0
  • 1.0.0

guri singh

My name is Guri. I love to write tutorials and tips that can help to other artisan. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.