Dropdown Module

A lightweight and customizable dropdown menu component that can be toggled by click or hover. Easily create multiple dropdowns on a single page to add interactive navigation elements to your website or application.

Installation

npm install dropdown

Usage

Import the 'makeDropdown' function in Javascript file

import makeDropdown from 'dropdown';

Creating Dropdown

Initialize the dropdown with optional configuration

makeDropdown({
  trigger: 'click' // or 'hover'
});

Configuration

trigger: Specifies how the dropdown menu is triggered. It can be either 'click' or 'hover'. Default is 'click'.

Example HTML

<div class="dropdown">
    <a class="dropdown-toggle">Home</a>
    <ul class="dropdown-menu">
        <li><a>Home</a></li>
        <li><a>Apply</a></li>
        <li><a>Announcement</a></li>
        <li><a>Learn More</a></li>
    </ul>
</div>

Behavior

Click Trigger: The dropdown menu will toggle visibility when the toggle button is clicked. Clicking outside the dropdown menu will hide it.

Hover Trigger: The dropdown menu will show when the mouse enters the toggle button and hide when the mouse leaves.

License

MIT