A simple utility module that provides drop down menus.
Install the package into your directory by running the following command:
npm i --save drooljs
import the package into your entry point js file as follows:
import drool from './drool.js'
drool.js
uses a default import, so you can import it by any name you like. I'm going to stick with using drool
for further instructions
drool
takes an object as parameter. The object has following structure:
{
class: droolClassName,
drool: true
}
The class
property takes in a class name in string format. This class name is the name of your drop-down container.
The drool
property specifies the initial state of drop-down.
drool: true
implies it is visible initially.drool: false
implies it is hidden initially.
For e.g.
<!-- example.html -->
<!-- your drop down structure -->
<div class="dropDown">
<button>Don't forget this</button>
<ul>
<li>Good!</li>
<li>You didn't</li>
<li>Forget</li>
</ul>
</div>
Note
Make sure your drop-down container have a class name. The drop-down container should contain an element that acts as a button. The drop-down container contains an element that acts as container for drop-down options.
// example.js
import drools from "./drool.js";
drools({
class: "dropDown",
drool: false,
})
This will generate a drop-down menu, which has hidden options initially and the options appear as you click on the button element.