sesadada-dropdown-magic-menu v0.0.3

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:

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) })