A jQuery plugin that allows to create a side nav as in modern mobile apps. It aims to simplicity so that everybody can use it no matter if expert programmers or not.

• jQuery v1.12.4
• jQuery v2.2.4
• jQuery v3.1.0

• v2.2.5 (2018-03-05):
  • update dependencies

If you are still using the v1.x.x, please, consider to update the plugin to the latest v2.x.x.

Before updating your local simpler-sidebar package, be sure to read the changelog too, especially the latest major update changelog. Upgrading without migrating will broke your scripts.

• Download
• Getting Started
  • Browserify
• Options
  • Options List
• Contributing
• Release History
• License

Run one of these commands in your bash according to your needs.

git clone https://github.com/simple-sidebar/simpler-sidebar.git

npm install simpler-sidebar

Or download the latest version from the releases page.

If you are updating, remember to read the Release History and to check for incompatibility issues.

You will need to prepare a specific HTML template in order to make it work properly. The code below is just an example from which you can and have to draw inspiration. Along with this plugin you are provided with some demo pages in the demo directory.

<div id="navbar">
  <!--
  #navbar is positioned fixed.

  It does not matter what kind of element #toggle-sidebar is.
  -->
  <span id="toggle-sidebar" class="button icon">ITEM</span>
</div>

<div id="sidebar">
  <!--
  simpler-sidebar will handle #sidebar's position.

  To let the content of your sidebar overflow, especially when you have a lot of content in it, you have to add a "wrapper" that wraps all content.

  TIP: provide a background color.
  -->
  <div id="sidebar-wrapper" class="sidebar-wrapper">
    <!--
    Links below are just an example. Give each clickable element, for example links, a class to trigger the closing animation.
    -->
    <a class="close-sidebar" href="#">Link</a>
    <a class="close-sidebar" href="#">Link</a>
    <a class="close-sidebar" href="#">Link</a>
    <a class="close-sidebar" href="#">Link</a>
  </div>
</div>

If you add the sidebar-wrapper (and you should), remember to give it this style attributes:

.sidebar-wrapper {
  position: relative;
  height: 100%;
  overflow: auto;
}

At the bottom of the web page, just before the </body> tag, include the jQuery library. If you are interested in better easing, include the jQuery-UI library too. Eventually include simpler-sidebar.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="simpler-sidebar/dist/jquery.simpler-sidebar.min.js"></script>

Call the simpler-sidebar plugin function and fill it with the options you need. Here is an example of some required options. Read the Options section for further informations.

<script>
    $( document ).ready( function() {
        $( "#sidebar" ).simplerSidebar( {
            selectors: {
                trigger: "#toggle-sidebar",
                quitter: ".close-sidebar"
            }
        } );
    } );
</script>

To customize the plugin, add the desired option in the plugin itself.

The options are stored in a javascript object, so you have to take care of javascript grammar while tweaking the plugin.

$( "#sidebar" ).simplerSidebar( {
    selectors: {
        trigger: "#toggle-sidebar",
        quitter: ".close-sidebar"
    },
    animation: {
        easing: "easeOutQuint"
    },
    sidebar: {
        width: 500
    },
    mask: {
        display: false
    }
} );

Check out all available options in the options list documentation page too and use the example above as reference.

Help me improve simplerSidebar and make it as perfect as possible, but first read the contribution guidelines.

Check out all releases in the Release History documentation page.

If you are still using the v1.x.x, please, consider to update the plugin to the latest v2.x.x.

Before updating your local simpler-sidebar package, be sure to read the changelog too, especially the latest major update changelog. Upgrading without migrating will broke your scripts.

Copyright (c) 2015 - 2017 simple-sidebar, Davide Di Criscito.

Dual licensed under the MIT and GPL-2.0 licenses.