Press "Enter" to skip to content

jQuery Select-Style Dropdown Menu Plugin | jQuery.bart.dropdown

jquery.bart.dropdown is a jQuery dropdown plugin that converts an unordered HTML list into a one-button dropdown component that is easy to select from a specified style.

jquery custom select dropdown, custom select option css only, nice select, custom select js plugin, jquery dropdown plugin, custom dropdown in jquery

How to make use of it:

1. Insert the Bart Dropdown plugin’s script after jQuery.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/jquery.bart.dropdown.js"></script>

2. Insert your HTML list along with a toggle button into the dropdown container.

<div class="dropdown">
  <button type="button">Basic Dropdown</button>
  <ul>
    <li><a href="#">item 1</a></li>
    <li><a href="#">item 2</a></li>
    <li><a href="#">item 3</a></li>
    <li><a href="#">item 4</a></li>
    <li><a href="#">item 5</a></li>
  </ul>
</div>

3. Initialize the dropdown plugin and accomplished.

$(function(){
  $('.dropdown').dropdown();
});

4. Set the trigger occasion.

<div class="dropdown" data-trigger="over">
  ...
</div>
// OR Via JavaScript
$('.dropdown').dropdown({
  trigger: "over"
});

5. Determine whether to point out the dropdown on web page load.

<div class="dropdown" data-show="true">
  ...
</div>
// OR Via JavaScript
$('.dropdown').dropdown({
  show: true
});

6. More configuration choices. Note that the next choices will also be handed through HTML data-OPTION attribute:

$('.dropdown').dropdown({
  bgColor: "#fff",
  border: "1px solid #ddd",
  padding: "0.25rem",
  zIndex: 99,
  itemBgColor: "#fff",
  itemOverBgColor: "#3b82f6",
  itemColor: "#000",
  itemOverColor: "#fff",
});

7. Trigger a function when a listing item is clicked:

$('.dropdown').dropdown({
  callback: (idx, ele) => {
    alert('index: ' + idx +  ', text: ' + $(ele).text())
  }
});

SEO-Friendly Select-style Dropdown Plugin, jquery.bart.dropdown Github, jqueryscript net dropdown combo tree, add css to select option jquery


See Demo And Download

Official Website(hyuk-june): Click Here

This superior jQuery/javascript plugin is developed by hyuk-june. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *