How to Easily Implement a Sidebar and Push Menu Using Slidebars.js [Beginner’s Guide]

A sidebar is an essential element for navigation and menu display on a website.
In this article, we’ll show you how to easily implement a sidebar and push menu area using the simple and flexible jQuery plugin “Slidebars.js.”
This guide is designed to be easy to understand even for beginners, so give it a try!

What is Slidebars.js?

Slidebars.js is a lightweight jQuery plugin that allows you to easily implement responsive sidebar menus.
It enables you to create menus that slide from the left, right, or top, providing users with a smooth and pleasant navigation experience.

Preparing the Required Files

First, prepare the files required to use Slidebars.js.
The necessary files are as follows:

• slidebars.css
• jquery.min.js (v1.12.2)
• slidebars.js

Add these files to your project.

CSS Settings

Load the slidebars.css file.
Below is the basic CSS configuration when using Slidebars.js.
Define the styles for the sidebar area (off-canvas) and the main content area (canvas=container).

<link rel="stylesheet" href="slidebars.css">
<style>
html, body {
  margin: 0;
}
h1{
  text-align: center;
  font-size: 20px;
  padding: 20px 0;
  width: 100%;
  line-height: 1.4em;
}
h4{
  padding-top: 15px;
}
[canvas=container],
[off-canvas] {
    padding: 10px 20px;
}
[off-canvas] {
    background-color: #8ED2DD;
}
[class*=js-] {
    cursor: pointer;
}
</style>

HTML Settings

Next, set up the HTML.
Using the code below, create the structure for the sidebar (off-canvas="slidebar-1 left reveal", off-canvas="slidebar-2 right shift", off-canvas="slidebar-3 top push") and the main content (canvas="container").

    <div canvas="container">
      <h1>Display sidebar and push menu area using slidebars.js.<br>Try clicking the buttons below.</h1>

      <h4>Left Sidebar Controls</h4>

      <p>
        <button class="js-open-left-slidebar">Open Left Sidebar</button>
        <button class="js-close-left-slidebar">Close Left Sidebar</button>
        <button class="js-toggle-left-slidebar">Toggle Left Sidebar</button>
      </p>

      <h4>Right Sidebar Controls</h4>

      <p>
        <button class="js-open-right-slidebar">Open Right Sidebar</button>
        <button class="js-close-right-slidebar">Close Right Sidebar</button>
        <button class="js-toggle-right-slidebar">Toggle Right Sidebar</button>
      </p>

      <h4>Top Sidebar Controls</h4>

      <p>
        <button class="js-open-top-slidebar">Open Top Sidebar</button>
        <button class="js-close-top-slidebar">Close Top Sidebar</button>
        <button class="js-toggle-top-slidebar">Toggle Top Sidebar</button>
      </p>

    </div>

    <div off-canvas="slidebar-1 left reveal">
      <p>Left sidebar area is displayed.</p>
    </div>

    <div off-canvas="slidebar-2 right shift">
      <p>Right sidebar area is displayed.</p>
    </div>

    <div off-canvas="slidebar-3 top push">
      <p>Top sidebar area is displayed.</p>
    </div>

JavaScript Settings

Finally, implement sidebar controls with JavaScript.
Load jquery.min.js (v1.12.2) and slidebars.js files.
To open a sidebar, use controller.open('sidebar-area');
to close it, use controller.close('sidebar-area');
and to toggle between open and close, use controller.toggle('sidebar-area').

<script src="jquery.min.js"></script>
<script src="slidebars.js"></script>

<script type="text/javascript">
( function ( $ ) {
    // Create a new instance of Slidebars
    var controller = new slidebars();

    // Initialize Slidebars
    controller.init();

    // Left sidebar controls
    $( '.js-open-left-slidebar' ).on( 'click', function ( event ) {
        event.stopPropagation();
        controller.open( 'slidebar-1' );
    } );

    $( '.js-close-left-slidebar' ).on( 'click', function ( event ) {
        event.stopPropagation();
        controller.close( 'slidebar-1' );
    } );

    $( '.js-toggle-left-slidebar' ).on( 'click', function ( event ) {
        event.stopPropagation();
        controller.toggle( 'slidebar-1' );
    } );

    // Right sidebar controls
    $( '.js-open-right-slidebar' ).on( 'click', function ( event ) {
        event.stopPropagation();
        controller.open( 'slidebar-2' );
    } );

    $( '.js-close-right-slidebar' ).on( 'click', function ( event ) {
        event.stopPropagation();
        controller.close( 'slidebar-2' );
    } );

    $( '.js-toggle-right-slidebar' ).on( 'click', function ( event ) {
        event.stopPropagation();
        controller.toggle( 'slidebar-2' );
    } );

    // Top sidebar controls
    $( '.js-open-top-slidebar' ).on( 'click', function ( event ) {
        event.stopPropagation();
        controller.open( 'slidebar-3' );
    } );

    $( '.js-close-top-slidebar' ).on( 'click', function ( event ) {
        event.stopPropagation();
        controller.close( 'slidebar-3' );
    } );

    $( '.js-toggle-top-slidebar' ).on( 'click', function ( event ) {
        event.stopPropagation();
        controller.toggle( 'slidebar-3' );
    } );

} ) ( jQuery );
</script>

Demo Page to Display Sidebar and Push Menu Area Using slidebars.js

You can check the operation using this code on the Slidebars.js demo page.
Click the link below to view the demo.

Demo page displaying sidebar and push menu area using slidebars.js

Source: GitHub – adchsm / Slidebars

You can find more detailed information about Slidebars.js in the GitHub repository below.

GitHub – adchsm / Slidebars.js

Summary

By using Slidebars.js, you can easily implement sidebars and push menus.
It offers high design flexibility and easy responsive support.
Use this guide as a reference and try adding it to your own project!

※ Use at your own risk when reusing this code.
Please do not reuse the Google Analytics tag inside the head tag of the demo page.