@talha15/dropdown-menu NPM

Dropdown Menu

This is a simple module for create dropdown menus.

Installation

Using npm:

$ npm i @talha15/dropdown-menu

and then

import { Dropdown } from "@talha15/dropdown-menu"

In a browser:

<script src="/path/to/dropdown.js"></script>

<script src="http://unpkg.com/@talha15/dropdown-menu"></script>

opitional:

<link rel="stylesheet" type="text/css" href="/path/to/dropdown.css" />

note: If you don't add this link, js file will add

<link
  rel="stylesheet"
  type="text/css"
  href="https://unpkg.com/@talha15/dropdown-menu@1.2.2/dropdown.css"
/>

this automatically.

Usage

Basic:

<div>
  <button id="btn" data-toggle="menu-class">Button</button>

  <div class="menu-class">
    <div class="dropdown-item">1a</div>
    <div class="dropdown-item">2b</div>
    <div class="dropdown-item">3c</div>
    <div class="dropdown-item">4d</div>
    <div class="dropdown-item">5e</div>
  </div>
</div>

Advanced:

<div>
  <button
    id="btn"
    data-toggle="menu-class"
    data-action="hover"
    data-modal="true"
    data-position="bottom-left"
  >
    Button
  </button>

  <div class="menu-class fade">
    <div class="dropdown-item">1a</div>
    <div class="dropdown-item">2b</div>
    <div class="dropdown-item">3c</div>
    <div class="dropdown-item">4d</div>
    <div class="dropdown-item">5e</div>
  </div>
</div>

Every dropdown toggle button must have "id" and "data-toggle=""" parameter. The "id" must be unique. The "data-toggle" must be equal to unique class of menu.

We have some opitional parameters too.

"data-action" = hover or click. defaut = click.

"data-position" = top-left or top-mid or top-right or bottom-left or bottom-mid or bottom-right. defaut = bottom-mid.

"data-modal" = true or false. default = true

We have a fade animation as opitional. You can use it with adding "fade" class to menu.

Button or Menu can be any element. For example button can be a "a" element or "div" element.

There are somethings you should pay attention: