Simple Customizable Slide Panel

toolslide.js is a minimalistic customizable slide panel for creating off-canvas navigation, tabbed drawer side panels, and more.

css slide out drawer, drawerjs, css drawer animation, drawer in html, javascript sliding drawer, drawer nav, responsive drawer css, navigation drawer web example

How to make use of it:

1. Insert the stylesheet toolslide.css within the header and the JavaScript toolslide.js at the finish of the doc.

<link rel="stylesheet" href="./dist/toolslide.css" />
<script src="./dist/toolslide.js"></script>

2. The minimal HTML structure for the drawer panel.

<div id="toolslide">
  <div class="ts-container">
    <div class="ts-nav-container">
      <div class="ts-nav-item" ts-target="first">
        Tab 1
      </div>
      <div class="ts-nav-item" ts-target="second">
        Tab 2
      </div>
      <div class="ts-nav-item" ts-target="third">
        Tab 3
      </div>
    </div>
    <div class="ts-content-container">
      <div id="first" class="ts-content-item">
        <div class="example-panel">
          <h5>Panel configuration:</h5>
          <textarea>Some fancy text here...</textarea>
        </div>
      </div>
      <div id="second" class="ts-content-item">
        <div class="example-panel">
          <span>Second panel content goes here</span>
        </div>
      </div>
      <div id="third" class="ts-content-item">
        <div class="example-panel">
          <span>Third panel content goes here</span>
        </div>
      </div>
    </div>
  </div>
</div>

3. Initialize the plugin and completed it.

var toolslide = toolslide("#toolslide", {
    // options here
});

4. Config the sliding drawer panel.

var toolslide = toolslide("#toolslide", {

    // 'top', 'right', 'bottom'
    position: "left",

    // panel height
    height: "100%",

    // panel width
    width: "25%",

    // open the panel on init
    startOpen: true,

    // is it closable?
    closeable: true,

    // min window size to close the panel
    minClosedSize: 0,

    // selector of toggle button
    toggleButton: "",

    // embed the panel in a separate container
    embed: false,

    // width/height of navigation itmes
    navigationItemWidth: "50px",
    navigationItemHeight: "50px",

    // auto close after a timeout
    autoclose: false,
    autocloseDelay: 5000,

    // close the panel on click outside
    clickOutsideToClose: true,

    // customize animations here
    animations: {
      replace: "crossfade 0.5s ease-in-out",
      toggle: "slide 0.5s ease",
    }

});

5. API strategies.

// open the panel
toolslide.open();

// close the panel
toolslide.close();

// check if the panel is opened
toolslide.isOpen();

// check if target content is active
toolslide.isActive(target);

// set active element
toolslide.setActiveById("elementId");

// set active element by index
toolslide.setActiveByIndex(0);

Here is the explanation of options object:

Option	Type	Description	Examples
position	string	Position of the panel on the screen	“top”, “bottom”, “left”, “right”
height	string	Panel height	“200px”, “20%”
width	string	Panel width	“200px”, “20%”
startOpen	boolean	Open panel after initialization	true, false
closeable	boolean	Allow panel to be closed (by clicking active navigation element)	true, false
autoclose	boolean	Allow panel to be auto closed (only when mouse cursor is outside)	true, false
autocloseDelay	int	Auto close delay in miliseconds	5000
clickOutsideToClose	boolean	Allow panel to be closed when clicked outside	true, false
animations.replace	string	Animation used when changing active panel	“crossfade 0.5s ease-in-out”, “slide 1s ease”, “slidefade 2s ease-in-out”
animations.toggle	string	Animation used when panel is opened/closed	“slide 0.5s ease”
listeners.beforeOpen	function	Callback fired before panel is opened	function (panel) {…}
listeners.afterOpen	function	Callback fired after panel is opened	function (panel) {…}
listeners.beforeClose	function	Callback fired before panel is closed	function (panel) {…}
listeners.afterClose	function	Callback fired after panel is closed	function (panel) {…}
listeners.beforeToggle	function	Callback fired before active content is changed	function (old, new) {…}
listeners.afterToggle	function	Callback fired after active content is changed	function (old, new) {…}