Zhaopudown

Zhaopudown is a lightweight and reusable JavaScript library for creating customizable dropdown menus. With this module, you can easily initialize single or multiple dropdowns with minimal effort and full flexibility.

Features

• Lightweight: A minimal and efficient JavaScript module.
• Reusable: Supports both single and multiple dropdowns.
• Easy Integration: Works seamlessly with any project or framework.
• Customizable: Fully customizable dropdown behavior and styling.

Installation

Install the package via npm:

npm install zhaopudown

Usage

Follow the steps below to use the zhaopudown module in your project.

1. Import the Module

Import the module in your project. Use ES Modules syntax:

import { dropdown, initMultiDropDown } from "zhaopudown";

2. Initialize a Single Dropdown

Here's how to set up a single dropdown in your project.

HTML

<button id="dropdown-btn">Hover me</button>
<div id="dropdown-content" class="dropDownContent">
  <p>This is dropdown content.</p>
</div>

Javascript

import { dropdown } from "zhaopudown";

const dropDownBtn = document.querySelector("#dropdown-btn");
const dropDownContent = document.querySelector("#dropdown-content");

// Initialize the dropdown
dropdown(dropDownBtn, dropDownContent);

3. Initialize Multiple Dropdowns

If you want to set up multiple dropdowns, follow the example below.

HTML

<button id="btn1">Dropdown 1</button>
<div id="content1" class="dropDownContent">
  <p>This is the content for dropdown 1.</p>
</div>

<button id="btn2">Dropdown 2</button>
<div id="content2" class="dropDownContent">
  <p>This is the content for dropdown 2.</p>
</div>

Javascript

import { initMultiDropDown } from "zhaopudown";

const dropdowns = [
  {
    btn: document.querySelector("#btn1"),
    ele: document.querySelector("#content1"),
  },
  {
    btn: document.querySelector("#btn2"),
    ele: document.querySelector("#content2"),
  },
];

// Initialize all dropdowns
initMultiDropDown(dropdowns);