# sesadada-dropdown-magic-menu

> This is a magic dropdown

Latest version **0.0.3** (published 2021-02-23) · ISC license · 0 weekly downloads

## Install

```sh
npm install sesadada-dropdown-magic-menu
pnpm add sesadada-dropdown-magic-menu
yarn add sesadada-dropdown-magic-menu
bun add sesadada-dropdown-magic-menu
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.3 |
| Published | 2021-02-23 |
| First published | 2021-02-22 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 3.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Serena Olivieri |
| Maintainers | sesadada |

## Links

- npm: https://www.npmjs.com/package/sesadada-dropdown-magic-menu
- npm.io page: https://npm.io/package/sesadada-dropdown-magic-menu

## Recent versions

- 0.0.3 (latest) — 2021-02-23
- 0.0.2 — 2021-02-23
- 0.0.1 — 2021-02-22

## README

This is my first published (and tested) npm package, (suggested by The Odin Project).

The sesadada-dropdown-magic-menu package contains a function, 'dropping', that drops down menus with tremendous transitions! Incredible.
To make it work you must use these 4 classes in your code though: 
'dropdown' for the main button div
'dropbtn' for the actual button
'dropdpwn-content' grouping the links showing during dropdown
'show' in the style sheet (to make the object visible)

Example
Basic HTML:

<div class="navbar">
    <a href="#home">Home</a>
    <a href="#news">News</a>
    <div class='dropdown'>
        <button class='dropbtn'>Dropdown
           </button>
        <div class='dropdown-content' id='whatever'>
          <a href='#'>Link 1</a>
          <a href='#'>Link 2</a>
          <a href='#'>Link 3</a>
        </div>
    </div> 
</div>

Basic CSS:
.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  cursor: pointer;
  font-size: 16px;  
  border: none;
  outline: none;
  color: white;
  padding: 0.5rem 1rem;
  background-color: inherit;
  font-family: inherit;
  transition: all 0.3s ease;
}

.navbar a:hover, .dropdown:hover .dropbtn, .dropbtn:focus {
    background-color: rgb(8, 73, 83);
    opacity: 1;
}

.dropdown-content {
  border-bottom-left-radius: 5px;
  position: absolute;
  background-color: #95a7b1;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  transition: all 0.5s ease-in-out;  
  visibility: hidden;
  opacity: 0;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
  transition: all 0.5s ease-in-out;
}

.dropdown-content a:hover {
    background-color: rgb(8, 73, 83);
    color: white;
    transition: all 0.5s ease-in-out;
}

.show {
    visibility: visible ;
    opacity: 1 !important;
}




In your index.js you can use it like this:

const myModule = require('sesadada-dropdown-magic-menu')

const dropdown = document.querySelectorAll('.dropbtn')
dropdown.forEach(d => {
  d.addEventListener('click', myModule.dropping)
})

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