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
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:
$(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.
{{ 'Comments (%count%)' | trans {count:count} }}
{{ 'Comments are closed.' | trans }}