@jiajiajia003/dropdown-menu

A lightweight, reusable dropdown menu component written in vanilla JavaScript. Easily add interactive dropdown menus to your web projects.

🚀 Installation

npm install @jiajiajia003/dropdown-menu

📦 Usage

1. Import the module: import { setupDropdown } from '@jiajiajia003/dropdown-menu';

2. HTML Structure Example:

3. Initialize the dropdown in JavaScript: const dropdowns = document.querySelectorAll('.dropdown'); dropdowns.forEach(dropdown => { setupDropdown(dropdown); });

4. Basic CSS Example .dropdown { position: relative; display: inline-block; }

.dropdown-button { cursor: pointer; }

.dropdown-menu { display: none; position: absolute; background-color: white; border: 1px solid #ccc; min-width: 160px; }

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

.dropdown-menu a:hover { background-color: #eee; }

.dropdown-menu.visible { display: block; }

✅ Features

Click to toggle dropdown menu.

Automatically closes when clicking outside.

Only one dropdown opens at a time.

Fully reusable — supports multiple dropdowns on the same page.

📄 License

ISC © jiajiajia003