Easy Customizable jQuery Dropdown Menu Plugin - VMCSelect
File Size: | 7.7 KB |
---|---|
Views Total: | 1961 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

VMCSelect is a simple, cross-browser jQuery plugin used to convert any number of DIV elements into a select
like scrollable dropdown menu that is easy to customize styles and animations.
How to use it:
1. Load the stylesheet file style.css
in the head
section for default dropdown styles.
<link href="style.css" rel="stylesheet">
2. Create the html structure for the dropdown menu.
<div id="vmcselect" class="vs-select" tabindex="-1"> <div class="vs-title"> <div class="vs-text"></div> <div class="vs-icon"></div> </div> <div class="vs-option" id="vs-option" tabindex="-1"> <div class="vs-scroll"> <div class="vs-items"> <div data-value="0" class="vs-item">Option 0</div> <div data-value="1" class="vs-item">Option 1</div> <div data-value="2" class="vs-item">Option 2</div> <div data-value="3" class="vs-item">Option 3</div> <div data-value="4" class="vs-item">Option 4</div> </div> </div> </div> </div>
3. Load the JavaScript file select.js
after jQuery library but before the closing body tag.
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <script src="select.js"></script>
4. Just call the vselect()
function on the top element and we're ready to go.
$('#vmcselect').vselect();
5. Here's a list of default customization options which can be passed to the vselect()
function on init. You can also pass them via html5 data-OPTION
attributes on top element.
$('#vmcselect').vselect({ // theme theme: 'default', // number of items displayed on one page size: 10, // outer & inner sizes mimicOuterHeight: 28, mimicInnerHeight: 26, mimicWidthPatch: 42, optionWidthPatch: 22, optionHeightPatch: 2, itemOuterHeight: 24, itemWidthPatch: 20, // width of the dropdown menu width: 'auto', // loop selection of items loop: false, // enable animation animate: true, // animation duration in ms durationShow: 100, durationHide: 100 });
This awesome jQuery plugin is developed by vomoc. For more Advanced Usages, please check the demo page or visit the official website.