Get new jQuery plugins just once a week

×

Simple Sidebar

FavoriteLoadingAdd to favorites

August 16, 2014

Simple Sidebar | A jQuery navigation sidebar plugin

Simple Sidebar is a jQuery plugin for a right or left navigation sliding sidebar with many configurable options.

Simple-Sidebar

Join the chat at https://gitter.im/dcdeiv/simple-sidebar GitHub version Bower version npm version MIT and GPL-2 license

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.

For an even simpler and stable version of this plugin check the simpler-sidebar fork.


Download

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

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

bower install simple-sidebar

npm install simple-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.

Getting Started

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="wrapper">
    <!--
    All your content must go here.
    This wrapper must be relative positioned, unless Simple-Sidebar won't work properly.
    * Every POSITION-FIXED ELEMENT must be positioned outside of this wrapper.
    * Every POSITION-ABSOLUTE ELEMENT must be positioned inside a POSITION-RELATIVE div.
    -->
</div>

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

    It does not matter what element #toggle-sidebar is, give it a selector (in this example #toggle-sidebar).
    -->
    <span id="toggle-sidebar" class="button icon"></span>
</div>

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

    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>

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 Simple-Sidebar.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="simple-sidebar/dist/jquery.simple-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" ).simpleSidebar({
            opener: "#button",
            wrapper: "#wrapper",
            sidebar: {
                align: "left", //or "right" - This option can be ignored, the sidebar will automatically align to right.
                width: 300, //You can ignore this option, the sidebar will automatically size itself to 300px.
                closingLinks: ".close-sidebar" // If you ignore this option, the plugin will look for all links and this can be buggy. Choose a class for every object inside the sidebar that once clicked will close the sidebar.
                css: {
                    //Here you can add more css rules but you should use your own stylesheet.
                    zIndex: 3000 //Choose the amount of zIndex you want. It must be the higher zIndex number.
                }
            }
        } );
    } );
</script>

Options

You can access options in two ways.

The first way is to add an option in the plugin itself. For example:

$( "#sidebar" ).simpleSidebar({
    opener: "#button",
    wrapper: "#wrapper",
    sidebar: {
        align: "left",
        width: 300,
        closingLinks: ".close-sidebar"
        css: {
            zIndex: 3000
        }
    }
});

The second way to access options is by using the following key:

$.fn.simpleSidebar.settings

After this key, you have to add the proper option, for example:

$.fn.simpleSidebar.settings.animation.duration = 1000

All keys must be put above the main plugin function and there should not be duplicates between them since keys override the options in the plugin function. Read the Options List for further informations about all available options.

According to the example above, here is the other way to tweak options by using the key:

$.fn.simpleSidebar.settings.sidebar.align = "left";
$.fn.simpleSidebar.settings.sidebar.width = 300;
$.fn.simpleSidebar.settings.sidebar.closingLinks = ".close-sidebar";
$.fn.simpleSidebar.settings.css.zIndex = 3000;

$("#sidebar").simpleSidebar({
    opener: "#toggle-sidebar",
    wrapper: "#wrapper"
});

You can also override multiple options by using the key but it is not safe and it could be buggy, especially when you try to override sidebar. However you can safely override css such as $.fn.simpleSidebar.settings.mask.css, for example:

$.fn.simpleSidebar.settings.mask.css = {
    backgroundColor: "black",
    opacity: 0.5,
    filter: "Alpha(opacity=50)"
};

Options List:

Release History

License

Copyright (c) 2015 - 2016 Davide Di Criscito

Dual licensed under the MIT and GPL-2.0 licenses.

Created by Davide DC

Download

Example

Simple Sidebar jQuery plugin

nav sidebar

Simple Sidebar

Related posts:

Easy Paginate
Sidr
Wheel Menu
Simple Sidebar jQuery plugin

http://jquer.in/wp-content/uploads/2014/08/Simple-Sidebar.jpg

jQuery plugin

Sign up for our weekly newsletter.

* We won't spam you ever