Off-canvas Side Panels With jQuery - Stacky.js

Stacky.js is a jQuery plugin that makes it easy to create off-canvas-style sidebar panels with open, close, maximize, and minimize capabilities. Typical use cases for this plugin include mobile menus, floating toolbars, setting panels, and much more.

Installation:

# NPM
$ npm install jquery.stacky --save

# Bower
$ bower install jquery.stacky --save

How to use it:

1. Add the jQuery Stacky.js plugin's files to the web page which has jQuery library loaded.

<link rel="stylesheet" href="jquery.stacky.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="jquery.stacky.js"></script>

2. Create a container to place your panels.

<div id="panels"></div>

3. The example panel content.

var sizes = ['thin', 'medium', 'wide'],
    content = $('<div></div>'),
    open = $('<a></a>').addClass('open-panel').append($('<i></i>').addClass('fa fa-folder-open-o')),
    openFloating = $('<a></a>').addClass('open-panel open-floating-panel').append($('<i></i>').addClass('fa fa-folder-open')),
    close = $('<a></a>').addClass('close').append($('<i></i>').addClass('fa fa-times')),
    expand = $('<a></a>').addClass('expand').append($('<i></i>').addClass('fa fa-expand')),
    collapse = $('<a></a>').addClass('collapse').append($('<i></i>').addClass('fa fa-minus')),
    header = $('<header></header>')
                .append(open)
                .append(openFloating)
                .append(expand)
                .append(collapse)
                .append(close);

    content.append(header);

// Returns a random integer between min (included) and max (excluded)
function getRandomInt(min, max) {
  return Math.floor(Math.random() * (max - min)) + min;
};

4. Initialize the Stacky plugin.

var stackyContainer = $('#panels').Stacky({
    fadeInSpeed: 'fast',
    scrollToSpeed: 600,
    panelDefaults: {
        content: content.html(),
        onBeforeOpen: function($panel){
            // Useful to set data in the panel's content
            // For example, setting initial values in a form's inputs
            console.log('Pushing', $panel);
        },
        onBeforeClose: function($panel){
            // Useful to retieve data from the panel before closing it
            // For example, extracting values from a form
            console.log('Removing', $panel);
        }
    }
});

5. Enable a toggle button to create new panels.

<a class="open-panel">Open panel</a>

$(document).on('click', ".open-panel", function(){
  var self = $(this),
      afterPanel = self.closest('.panel'),
      isFloating = self.hasClass('open-floating-panel'),
      identifier = getRandomInt(0, 1000);

  if(afterPanel.length == 0){
      afterPanel = undefined;
  }
  
  var $panel = stackyContainer.data('Stacky').push({
      id: 'panel-' + identifier,
      class: 'regular',   // width
      floating: isFloating,
      after: isFloating ? afterPanel : undefined
  });
});

6. All default plugin options.

var stackyContainer = $('#panels').Stacky({

    // Speed when making the new panel visible
    fadeInSpeed: 'fast',            

    // Speed when moving the scroll bar
    scrollToSpeed: 600,          

    // All panels are created with these settings, unless they override them   
    panelDefaults: {                

      // If different than undefined, the new panel is inserted after this jQuery element
      after: undefined,           

      // HTML to be inserted into the panel
      content: '',                

      // Indicates if the new panel should be placed using absolute position
      floating: false,            

      // id attribute of the new panel
      id: '',                     

      // class attribute of the new panel
      class: '',                  

      // It's called before fading in the new panel
      onBeforeOpen: function ($panel) {},   

      // It's called before hiding and removing the panel.
      // If a false value is returned, the panel must remain opened
      onBeforeClose: function ($panel) {},  
    }

});

7. Default CSS classes.

// Used to indicate the latest added panel
active: 'active',

// Used to bind the close action (closing a panel) to a DOM element
close: 'close',

/*
* Used to bind the collapse action (returning a panel to its initial width)
* to a DOM element
*/
collapse: 'collapse',

/*
* Used to bind the expand action (making a panel to fill its container's
* width) to a DOM element
*/
expand: 'expand',

// Indicates that a panel has been expanded
expanded: 'expanded',

// Indicates that a panel must be placed with an absolute position
floating: 'floating',

// Provides a way to add styles to panels
panel: 'panel',

// Provides a way to add styles to panels
panels: 'panels',

// Highlights certain panel
highlight: 'highlight'

8. API methods.

// Closes the current active panel
stackyContainer.closeActive();

// Moves the scroll bar to show the given panel, and then highlights it.
stackyContainer.highlight($panel);

// Moves the scroll bar to show the given panel, and then executes the callback, if given.
stackyContainer.goTo($panel, callback);

---

This awesome jQuery plugin is developed by jachinte. For more Advanced Usages, please check the demo page or visit the official website.