# @talha15/dropdown-menu

> Simple module for create dropdown menu

Latest version **1.2.2** (published 2020-10-23) · ISC license · 0 weekly downloads

## Install

```sh
npm install @talha15/dropdown-menu
pnpm add @talha15/dropdown-menu
yarn add @talha15/dropdown-menu
bun add @talha15/dropdown-menu
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.2 |
| Published | 2020-10-23 |
| First published | 2020-07-18 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 8.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Talha Karasu |
| Maintainers | talha15 |
| Keywords | dropdown, menu |

## Links

- npm: https://www.npmjs.com/package/@talha15/dropdown-menu
- Repository: https://github.com/TalhaK15/dropdown-menu
- Homepage: https://github.com/TalhaK15/dropdown-menu#readme
- Issues: https://github.com/TalhaK15/dropdown-menu/issues
- npm.io page: https://npm.io/package/@talha15/dropdown-menu

## Recent versions

- 1.2.2 (latest) — 2020-10-23
- 1.2.1 — 2020-10-23
- 1.2.0 — 2020-10-23
- 1.1.0 — 2020-10-23
- 1.0.4 — 2020-07-22
- 1.0.3 — 2020-07-22
- 1.0.2 — 2020-07-18
- 1.0.1 — 2020-07-18
- 1.0.0 — 2020-07-18

## README

# Dropdown Menu

This is a simple module for create dropdown menus.

## Installation

#### Using npm:

```shell
$ npm i @talha15/dropdown-menu
```

and then

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

#### In a browser:

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

or

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

opitional:

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

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

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

this automatically.

## Usage

#### Basic:

```html
<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:

```html
<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:

- The Button and Menu **must** be in the same parent element.
- All of the menu items's first class **must** be same.

---
_Source: https://npm.io/package/@talha15/dropdown-menu · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._