simple-dropdown-control v1.0.1

Dropdown Menu Generator

This is a simple yet versatile JavaScript library that allows you to create dropdown menus with either click or hover triggers.

Installation

You can install the Dropdown Menu Generator package via npm:

npm install simple-dropdown-control

Usage

1. Include the library in your project:

import { createDropdown } from "simple-dropdown-control";

2. In your HTML, create a container element with the following structure:

<!-- For dropdown click -->
<div class="dropdown-container">
  <button class="dropdown-btn" data-trigger="click">Dropdown</button>
  <div class="dropdown-content">
    <!-- Your dropdown content goes here -->
  </div>
</div>

<!-- For hover click -->
<div class="dropdown-container">
  <button class="dropdown-btn" data-trigger="hover">Dropdown</button>
  <div class="dropdown-content">
    <!-- Your dropdown content goes here -->
  </div>
</div>

3. Initialize the dropdown by calling the createDropdown function and passing the dropdown container element:

const dropdownContainer = document.querySelector(".dropdown-container");
createDropdown(dropdownContainer);

Styling

The library doesn't include styles by default. You'll need to create a css styles and add the following code.

.dropdown-content {
  display: none;
}

.visible {
  display: block;
}

License

This is free and unencumbered software released into the public domain.

Anyone is free to copy, modify, publish, use, compile, sell, or distribute this software, either in source code form or as a compiled binary, for any purpose, commercial or non-commercial, and by any means.