jQuery Plugin To Create An Animated Side Toolbar - Vcore Sidebar

File Size: 9.83 KB
Views Total: 4339
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin To Create An Animated Side Toolbar -  Vcore Sidebar

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.