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>
    <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 accomplished.


4. Set the trigger occasion.

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

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

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

6. More configuration choices. Note that the next choices will also be handed through 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 listing item is clicked:

  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.

Related Posts


[Icon Picker] Iconpicker for Bootstrap 5 Icons Library

Bootstrap 5-based icon picker which supports any icon libraries like Bootstrap Icons, Font Awesome[fontawesome.com], etc. Must Read: 1000+ Pixel Perfect SVG Icons For Vue Components | Unicons How…


Bootstrap Multiple Image Upload with Preview and Delete | ImagesLoader

ImagesLoader is a standard bootstrap image upload plugin that provides an easy-to-use and nice-looking interface for uploading multiple images to a web server. Must Read: HTML 5…


A Lightweight jQuery Plugin for Animating Split-Flap Displays | fallblatt

fallblatt is a lightweight jQuery plugin for animating split screens. This jQuery plugin allows you to include such offers in your web application. Everything from virtual departure…


Dark & Light Switch Mode Toggle for Bootstrap 5

Switching to dark mode is done by toggling HTML tags that include -dark or -light as a category. It is made by manipulating the DOM with JavaScript. The text color also changes depending…


jQuery Plugin for Countdown Timer on HTML Page | SyoTimer

yoTimer jQuery plugin allows you to create digital style countdowns/periodic timers on the webpage, with callbacks support and timezone/translation customization. Features Periodic count with the specified period…


Dynamic, Data-driven Periodic Table built with Vue.js

Periodicity is a dynamic, data-driven periodic table created with Vue.js that uses D3 animations and graphs to show the beauty of periodic trends. Built With vue.js (component…