jQuery Plugin To Create An Animated Side Toolbar - Vcore Sidebar
| File Size: | 9.83 KB |
|---|---|
| Views Total: | 4357 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
Vcore Sidebar is a tiny jQuery plugin which allows you to create an animated, fixed and vertical side toolbar on your web page. Hover over the toolbar icon you will see a text label sliding out from the toolbar to display more information.
How to use it:
1. Load the latest version of jQuery JavaScript library from a CDN.
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
2. Load the jQuery Vcore Sidebar plugin on the webpage. Make sure the vcore.sidebar.js is loaded after the jQuery library.
<link rel="stylesheet" href="vcore.sidebar.css"> <script src="vcore.sidebar.js"></script>
3. Append a toolbar to a DOM element and set the items using 'items' JS array.
$(function(){
$('body').vSidebar({
'items': [
{
link: '#1',
'iconUrl':'images/icon-phone.png',
'label':'Label Text 1'
},
{
link: '#2',
'iconUrl':'images/icon-guide.png',
'label':'Label Text 2'
},
{
link: '#3',
'iconUrl':'images/icon-cart.png',
'label':'Label Text 3'
}
]
});
});
4. All the default customization options.
// an array of items 'items': null, // where to postion the sidebar 'position': 'right bottom', // horizontal magrin 'horizontalMargin': 200, // vertical margin 'verticalMargin': 0,
This awesome jQuery plugin is developed by vyquanghoa. For more Advanced Usages, please check the demo page or visit the official website.











