ozioma-dropdown-module v1.0.1

Dropdown Module

A reusable dropdown module for creating interactive dropdown menus with ease.

Installation

To install the module, run the following command:

npm install ozioma-dropdown-module

Usage

To use the dropdown module, follow these steps:

1. Include the HTML Structure

Add the following HTML structure for each dropdown menu you want to create:

<div class="dropdown">
  <button class="dropdown-button">Menu 1</button>
  <div class="dropdown-content">
    <a href="#">Item 1</a>
    <a href="#">Item 2</a>
    <a href="#">Item 3</a>
  </div>
</div>

<div class="dropdown">
  <button class="dropdown-button">Menu 2</button>
  <div class="dropdown-content">
    <a href="#">Item A</a>
    <a href="#">Item B</a>
    <a href="#">Item C</a>
  </div>
</div>

2. Include the CSS Styles

Include the following CSS styles in your project to style the dropdown menus:

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-button {
  background-color: #3498db;
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}

.dropdown-button:hover {
  background-color: #2980b9;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  background-color: #f1f1f1;
}

.visible {
  display: block;
}

3. Initialize the Dropdowns with JavaScript

Add the following JavaScript to initialize the dropdown menus:

const { initializeDropdowns } = require("ozioma-dropdown-module");

// Call this function after your DOM has loaded
document.addEventListener("DOMContentLoaded", initializeDropdowns);

API

The module exports the following:

Dropdown

A class that manages a single dropdown instance.

initializeDropdowns

A function that initializes all dropdown elements on the page.

License

This project is licensed under the MIT License. See the LICENSE file for details.

Author

• Ozioma Egole

Feel free to reach out with any questions or contributions!