October 13, 2018


Link files

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

Markup example

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

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

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

Hook up the plugin

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

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

        buttonsSelector: '#my-button, .another-button',

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