Dropdown Module

A reusable JavaScript module for creating dropdown menus with customizable show/hide functionality. Installation

To install the module, use npm:

bash

npm install your-package-name

Usage

1. Import the Dropdown module

In your JavaScript file, import the Dropdown class from the module.

javascript

import Dropdown from 'Dropdown';

2. Basic Setup

Add your HTML structure for the dropdown button and content:

html

3. Initialize the Dropdown

Create an instance of Dropdown in your JavaScript, passing in the button and content elements:

javascript

const button = document.querySelector('.dropdown-button'); const content = document.querySelector('.dropdown-content');

const myDropdown = new Dropdown(button, content);

4. Importing CSS (Optional)

If you've included a CSS file in the package, import it into your project as well:

javascript

import 'Dropdown/dropdown.css';

Ensure that your HTML includes the necessary classes for the dropdown, such as .dropdown-button and .dropdown-content, as well as any additional classes you defined in the CSS file. Example

javascript

import Dropdown from 'Dropdown'; import 'Dropdown/dropdown.css';

const button = document.querySelector('.dropdown-button'); const content = document.querySelector('.dropdown-content');

const myDropdown = new Dropdown(button, content);

Customization

You can customize the dropdown behavior by using different triggerType options or modifying the CSS for specific styling.

API

Dropdown(button, content, visibleClass): Initializes a new dropdown.
    button - The button that triggers the dropdown.
    content - The content to show/hide when the dropdown is toggled.
    visibleClass - (Optional) The class used to show the dropdown content (default is 'visible').

License

MIT License