Easy Customizable jQuery Dropdown Menu Plugin - VMCSelect

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.