node package manager
Easy collaboration. Discover, share, and reuse code in your team. Create a free org »

sidebarbones

sidebarbones

MIT license Build Status

The heart of simple-sidebar and simpler-sidebar plugins.

Disclaimer

This repository is the beta program that is used to develop simple-sidebar and simpler-sidebar. In this repository you can find the latest, sometimes instables features.

Use this repository as reference to tweak, create, and improve your plugins. You can even plug it into your website if you like!

Navigate

Download

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

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

bower install sidebarbones

npm install sidebarbones

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="navbar">
  <!--
  #navbar is positioned fixed.
 
  It does not matter what kind of element #toggle-sidebar is.
  -->
  <span id="toggle-sidebar" class="button icon"></span>
</div>
 
<div id="sidebar">
  <!--
  sidebarbones 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.
  -->
  <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 sidebarbones.

<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="./path/to/sidebarbones/dist/jquery.sidebarbones.min.js"></script>

Call the sidebarbones 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" ).sidebarbones( {
          selectors: {
            trigger: ".toggle-sidebar",
            quitter: "close-sidebar"
          }
        } );
    } );
</script> 

Browserify

sidebarbones now supports AMD and UMD modules. So now it is easier to require sidebarbones with browserify, here's how:

Firstly you have to install with npm all the dependencies such as jquery, jquery-ui-browserify, sidebarbones, browserify and browserify-shim.

dev-dependencies

npm i --save-dev browserify browserify-shim jquery jquery-ui-browserify sidebarbones

dependencies You can install them with Bower too.

npm i --save jquery jquery-ui-browserify sidebarbones

Add the browserify-shim options in your package.json file:

"browser"{
  "jquery": "./node_modules/jquery/dist/jquery.js",
  "jquery-ui-browserify": "./node_modules/jquery-ui-browserify/dist/jquery-ui.js",
  "sidebarbones": "./node_modules/sidebarbones/dist/jquery.sidebarbones.js"
},
"browserify-shim"{
  "jquery": "window.$",
  "three": "global:THREE",
  "jquery-ui-browserify": {
    "depends": ["jquery:window.$"],
    "exports": "window.$.ui"
  },
  "sidebarbones": {
    "depends": ["jquery:window.$"],
    "exports": "window.$.sidebarBones"
  }
},
"browserify"{
  "transform": [ "browserify-shim" ]
}

Now you will be able to require them in you file:

// Jquery 
window.$ = window.jQuery = require( "jquery" );
 
// Jquery-ui is currently unavailable with browserify 
// You must use this module instead 
window.$.ui = require( "jquery-ui-browserify" );
 
// Importing sidebarbones 
window.$.sidebarBones = require( "sidebarbones" );
 
// Setting options 
$( document ).ready( function() {
  $( "#sidebar" ).sidebarbones( {
    selectors: {
      trigger: ".toggle-sidebar",
      quitter: "close-sidebar"
    }
  } );
} );

Run browserify . -d -o bundle.js to pack all things.

Check out the browserify documentation and the browserify-shim documentation.

Options

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" ).sidebarbones( {
    selectors: {
        trigger: ".toggle-sidebar",
        quitter: "close-sidebar"
    },
    animation: {
      easing: "easeOutQuint"
    },
    sidebar: {
      width: 500
    },
    mask: {
      display: false
    }
} );

Options List

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

Contributing

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

Release History

Check out all releases in the Release History documentation page.

  • v1.1.0 (2016-12-02):
    • Add support to UMD/AMD.
    • Drop support to Grunt in favour of to be replaced by Gulp.
    • Provide a file bundled with browserify in demo/javascripts.

License

Copyright (c) 2016 simple-sidebar, Davide Di Criscito

Licensed under the MIT license.