SEO-Friendly Select-style Dropdown Plugin - jQuery.bart.dropdown

File Size: 5.27 KB
Views Total: 284
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
SEO-Friendly Select-style Dropdown Plugin - jQuery.bart.dropdown

Bart Dropdown is a jQuery plugin that converts an HTML unordered list into an SEO-friendly, select-style single button dropdown component.

How to use 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 together with a toggle button into the dropdown container.

<div class="dropdown">
  <button type="button">Basic Dropdown</button>
    <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>

3. Initialize the dropdown plugin and done.


4. Set the trigger event. Default: 'click'.

<div class="dropdown" data-trigger="over">
// OR Via JavaScript
  trigger: "over"

5. Determine whether to show the dropdown on page load. Default: false.

<div class="dropdown" data-show="true">
// OR Via JavaScript
  show: true

6. More configuration options. Note that the following options can also be passed via HTML data-OPTION attribute:

  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 list item is clicked:

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

This awesome jQuery plugin is developed by hyuk-june. For more Advanced Usages, please check the demo page or visit the official website.