jQuery plugin for interactive drop-down list box

1. Introduction

jquery-hover-dropdown-box is a jQuery plugin for interactive dropdown list boxes. The plugin could be presented on a hover or inserted inline on your website. Additionally, you can add checkboxes to the items on the dropdown list.

2. Plugin Overview

Demo

3. How to install and use jquery-hover-dropdown-box jQuery plugin

Follow the below steps to install jquery-hover-dropdown-box jQuery plugin on your website.

1. Include jQuery library and jquery-hover-dropdown-box CSS and JS files:

!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<!-- Dropdown Lis Box Js -->
<script src="jquery-hover-dropdown-box.js"></script>

<!-- Dropdown List Box CSS -->
<link rel="stylesheet" href="jquery-hover-dropdown-box.css">

2. Create an HTML div element on your website:

<div id="inline-drop-down-box"></div>

3. Initialize jquery-hover-dropdown plugin:

$(function(){
 $('#inline-drop-down-box').hoverDropdownBox({
        title: 'Example',
        items: {
            "Item A": {
                color: "#e74c3c",
                inputType: "text",
                inputChecked: true,
                inputPlaceholder: "Example input"
                },
            "Item B": {
                color: "#f1c40f", 
                inputType: "checkbox",
                inputChecked: false
                },
            "Item C": {
                color: "#2ecc71",
                inputType: "checkbox",
                inputChecked: false
                },
     },
   });
});

4. Conclusion

In this article, we presented jquery-hover-dropdown plugin that provides an interactive dropdown list box. The plugin should be useful for everyone who is looking for an advanced dropdown component for a website. jquery-hover-dropdown is easy for customization and you can add an additional checkbox to every item or attach the 'Add new item' feature.