dropdown-menu

A simple, lightweight JavaScript module for adding toggle functionality to dropdown menus.

Installation

npm install dropdown-menu

Usage

HTML Structure

Add the following class names to your HTML:

<div class="dropdown-container">
  <button class="dropdown-toggle">Menu</button>
  <ul class="dropdown-menu">
    <li>Option 1</li>
    <li>Option 2</li>
    <li>Option 3</li>
  </ul>
</div>

Required classes:

• .dropdown-container - Wrapper element for each dropdown
• .dropdown-toggle - The button that toggles the menu
• .dropdown-menu - The menu element to show/hide

JavaScript

import activate from "dropdown-menu";

activate();

Multiple Dropdowns

The module automatically handles multiple dropdowns on the same page:

<div class="dropdown-container">
  <button class="dropdown-toggle">Menu 1</button>
  <ul class="dropdown-menu">
    <li>Option A</li>
    <li>Option B</li>
  </ul>
</div>

<div class="dropdown-container">
  <button class="dropdown-toggle">Menu 2</button>
  <ul class="dropdown-menu">
    <li>Option X</li>
    <li>Option Y</li>
  </ul>
</div>

License

MIT