Easy jQuery Responsive Sliding Sidebar Plugin - Simple SideBar

Easy jQuery Responsive Sliding Sidebar Plugin - Simple SideBar
File Size: 32.2 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Simple SideBar is a jQuery plugin for creating responsive, animated, left & right sidebars that can be used for mobile app-style off-canvas navigation, sliding menu, toggle navigation menu, and more.

How to use it:

1. Include jQuery library and the jQuery simple sidebar plugin on the web page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="Two-Sidebars-Widget/twosidebarswidget.js"></script>

2. Create the left and right sidebars.

<div id="rightbar" class="bars">
<h2>This is the Right sideBar!</h2>
<nav>
<ul>
<li><a href="#sec1">Section 1</a></li>
<li><a href="#sec2">Section 2</a></li>
<li><a href="#sec3">Section 3</a></li>
...
</ul>
</nav>
</div>

<div id="leftbar" class="bars">
<h2>This is the Right sideBar!</h2>
<nav>
<ul>
<li><a href="#sec1">Section 1</a></li>
<li><a href="#sec2">Section 2</a></li>
<li><a href="#sec3">Section 3</a></li>
...
</ul>
</nav>
</div>

3. Create a sticker header with toggle buttons to open the sidebars.

<div id="navbar">
<nav> 
<img id="openleft" width="32px" height="32px" src="[email protected]" alt="Left menu"/> 
<img id="openright" width="32px" height="32px" src="[email protected]" alt="Right menu"/> </nav>
</div>

4. The sample CSS to style the sidebars.

.bars {
...
}
#navbar {
...
}
#openright {
float: right;
}
#openleft {
float: left;
}

4. Call the plugin and you're done.

$(document).ready(function(){
    $('#rightbar').rightSidebarWidget();
    $('#leftbar').leftSidebarWidget();
    $('#openright').openRightSidebarWidget();
    $('#openleft').openLeftSidebarWidget();
});

5. Options and defaults

//Global plug-in settings
//*REQUIRED*
settings: {
  //*REQUIRED* OPENER is the selector that fire the animation. It can be an icon a button, an input, an image, a div or a span. Whatever you want. Ex: '.menu-button', '#button'.
  opener: undefined, //STRING
  //*REQUIRED* WRAPPER is the selector for the wrapper/container div/section that holds all content. It is required to animate correctly the document. Fixed elements ("position: fixed") can be included or excluded. It does not matter if you put inside the $sidebar and the navigation-bar nor if you put them outside. Ex: '.wrapper', '#container' etc.
  wrapper: undefined, //STRING
  //IGNORE is the selector for all elements that must be ignored. This feature comes in help especially when you have to install this plug-in in a CMS or blog. TUMBLR Ex: '#ga_target, #tumblr_controls'.
  ignore: undefined, //STRING
  //DATA is the data-attribute for the new elements that the plug-in creates.
  data: 'ssbplugin',
  //ANIMATION properties.
  animation: {
    //DURATION of the animation
    duration: 500,
    //EASING of the animation. If you include the "jQuery-UI" library in your document you can specify an easing (see https://jqueryui.com/resources/demos/effect/easing.html) Ex: 'linear', 'swing', 'easeInQuad', 'easeOutQuad', 'easeInOutQuad', 'easeInCubic', 'easeOutCubic', 'easeInOutCubic', 'easeInQuart', 'easeOutQuart', 'easeInOutQuart'.
    easing: 'swing'
  }
},

//*REQUIRED* all SIDEBAR settings
sidebar: {
  //*REQUIRED* the ALIGN of the $sidebar. Ex: undefined, 'left', 'right'.
  //*WARNING* type in lowercase. If undefined the align is automatically assigned to 'left'.
  align: undefined, //STRING
  //*REQUIRED* the WIDTH and MAXWIDTH of the $sidebar. This value will override CSS.
  width: 350, //NUMBER
  //the GAP between the end of the sidebar (margin-right for the left-sidebar. margin-left for the right-sidebar) and the end of the document (document margin-right for the left-sidebar. document margin-left for the right-sidebar) when the screen is smaller that the $sidebar width.
  gap: 64, //NUMBER
  //CLOSINGLINKS is the selector that will fire the $sidebar closing animation.
  //*WARNING* do not select parent and child. Ex: 'li, a' when "<li><a href=""></a></li>". So just select the child element ('a'). POSSIBLE EXAMPLES: 'a', 'li', 'a, .fauxlinks, #social, .button'.
  closingLinks: 'a',
  //*REQUIRED* This feature assures the plug-in that some values will override CSS.
  style: {
    //*REQUIRED* zINDEX or 'z-index' is required to position the sidebar above ALL content and to position the "mask div" one level below the sidebar.
    zIndex: 3000
    //
    //*WARNING* You can add more style here or in a separate file but everything here will override styles in separate CSS files.
    //*WARNING* Do no care about "position: fixed, top:0, left:0, bottom:0, right:0" because the plug-in will care about it. Positioning rules will be overridden automatically by the plug-in.
  }
},

//MASK holds all settings of the mask-div. The mask-div is a required feature that lays over the document content (except the $sidebar) and fires the closing animation function.
mask: {
  //STYLE holds all CSS rules. Use this feature to stylize the mask.
  style: {
    //Default options.
    backgroundColor: 'black', //if you do not want any color use 'transparent'.
    opacity: 0.5, //if you do not want any opacity use 0.
    filter: 'Alpha(opacity=50)' //IE8 and earlier - If you do not want any opacity use 0.
    //You can add more options.
  }
}

Change logs:

2.8.3 (2016-02-17)

1.2.2 (2015-05-07)

  • Fixed headers.

1.2.0 (2015-05-04)

  • CHANGED: sidebar.style --> sidebar.css,mask.style --> sidebar.css
  • ADDED: subWrapper.css, subwrapper.css.position: 'relative'

1.1.2 (2015-03-22)

  • FIXED - scrollbar bug;
  • DELETED - onClose callback.

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