jQuery plugin for interactive drop-down list box

January 04, 2020 No comments jQuery Dropdown

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.

Jquery plugin for interactive drop down list box

2. Plugin Overview

Library jquery-hover-dropdown-box
Author Masanori Ohgita
Licence MIT Licence
Repository GitHub
Dependencies jQuery 2.0.3 or Latest version


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:

        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.

{{ message }}

{{ 'Comments are closed.' | trans }}