The heart of simple-sidebar and simpler-sidebar plugins.
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!
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.
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.
<!--#navbar is positioned fixed.It does not matter what kind of element #toggle-sidebar is.--><!--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.--><!--Links below are just an example. Give each clickable element, for example links, a class to trigger the closing animation.-->LinkLinkLinkLink
If you add the sidebar-wrapper (and you should), remember to give it this style attributes:
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.
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.
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
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
browserify-shim options in your
Now you will be able to require them in you file:
// Jquerywindow$ = windowjQuery = ;// Jquery-ui is currently unavailable with browserify// You must use this module insteadwindow$ui = ;// Importing sidebarboneswindow$sidebarBones = ;// Setting options;
browserify . -d -o bundle.js to pack all things.
To customize the plugin, add the desired option in the plugin itself.
Check out all available options in the options list documentation page too and use the example above as reference.
Help me improve sidebarbones and make it as perfect as possible, but first read the contribution guidelines.
Check out all releases in the Release History documentation page.
Copyright (c) 2016 simple-sidebar, Davide Di Criscito
Licensed under the MIT license.