A reusable dropdown menu for the web
npm install @pixie-cheeks/dropdown-menuThis is an npm package made for creating reusable dropdowns. It supports both hover and click events as a trigger.
This was done for an assignment by The Odin Project. Initially had the idea of implementing positioning and elaborate behavioral patterns for the dropdown menus but decided to stop when I realized I was spending way too much time on a simple task. Therefore, this code does the bare minimum of what was required.
I'm still unsure about a lot of things but I did learn a lot as well.
To install with npm, use the following command:
``sh`
npm install @pixie-cheeks/dropdown-menu
`js
const createDropdownManager = require('@pixie-cheeks/dropdown-menu');
const manager = createDropdownManager('dropdown__menu--hidden');
`
Import the createDropdownManager factory function and then use it to create a new dropdown manager. The factory function needs an invisibility class that will be toggled off and on whenever triggered. The following code explains this clearly.
`css`
.dropdown__menu--hidden {
display: none;
}
It is assumed that the menu is hidden by default and hence the name invisibility class.
` html`
The trigger in this case is the .dropdown__trigger element, and the .dropdown__menu is the menu. We'll use a click event for this scenario:
`js`
manager.addDropdown(
document.querySelector('.dropdown__trigger'),
document.querySelector('.dropdown__menu'),
'click',
);
This will make it so every time we click on the trigger, the dropdown menu's visibility is toggled.
Once you are done with it, you can disable the dropdown behavior with this method:
`js`
manager.removeDropdown(
document.querySelector('.dropdown__trigger'),
document.querySelector('.dropdown__menu'),
'click',
);
If you have a suggestion that would improve this package, feel free o fork the repo and create a pull request. You can also open an issue with the tag "enhancement".
1. Fork the Project
2. Create a new Branch (git checkout -b improvement)git commit -m 'Optimize suboptimal code'
3. Commit your Changes ()git push origin improvement`)
4. Push to the Branch (
5. Open a Pull Request
Distributed under the ISC License. See their page for more information