Dripdown NPM | npm.io

dripdown

A lightweight utility to easily toggle dropdown menus with built-in outside click handling.

🚀 Features

Simple to Use: Attach a dropdown and button with minimal setup.
Handles Outside Clicks: Automatically closes the dropdown when clicking outside.
Reusable: Works with multiple dropdown-button pairs.
Lightweight: Pure JavaScript with no dependencies.

📦 Installation

Install the package via npm:

npm install dripdown

🛠️ Usage

Here's how to integrate dripdown into your project:

HTML

Add a button and dropdown to your page:

<button class="dropdown-button">Toggle Dropdown</button>
<div class="dropdown">
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</div>

JavaScript

Import and use the utility:

import toggleDropdown from "dripdown";

// Select the button and dropdown
const button = document.querySelector(".dropdown-button");
const dropdown = document.querySelector(".dropdown");

// Initialize the dropdown toggle functionality
toggleDropdown(dropdown, button);

⚙️ Options

The package is designed to be simple. You only need to pass:

dropdown: The DOM element representing the dropdown menu.
button: The DOM element that toggles the dropdown.

🎨 Styling

By default, the dropdown's visibility is toggled using a class named dropdown--visible. You can customize it in your CSS:

.dropdown {
  display: none;
}

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

Feel free to adapt the styling to match your design.

✨ Example

Here’s a complete example:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Dropdown Example</title>
    <style>
      .dropdown {
        display: none;
        position: absolute;
        background: #f1f1f1;
        border: 1px solid #ddd;
        padding: 10px;
        width: 150px;
      }

      .dropdown.dropdown--visible {
        display: block;
      }
    </style>
  </head>
  <body>
    <button class="dropdown-button">Toggle Dropdown</button>
    <div class="dropdown">
      <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
      </ul>
    </div>

    <script type="module">
      import toggleDropdown from "./node_modules/dripdown/index.js";

      const button = document.querySelector(".dropdown-button");
      const dropdown = document.querySelector(".dropdown");

      toggleDropdown(dropdown, button);
    </script>
  </body>
</html>

🔧 Development

If you’d like to contribute or customize the package, clone the repository:

git clone https://github.com/Mousow2023/drop-down-menu.git
cd drop-down-menu
npm install

📄 License

This project is licensed under the MIT License.

📝 Acknowledgments

Thanks for using dripdown! If you like this package, consider giving it a ⭐ on GitHub.

dropdown menu utility toggler

1.0.0

6 months ago