To install the package run :
npm i kiwasthal-dropmenu
You will need the following packages :
- @babel/core
- babel-loader
- webpack
- webpack-cli
You can install all the dependencies by running:
npm i -D @babel/core babel-loader webpack webpack-cli
drop-menu-usage.mp4
- Passing a reference as the first arguement of the imported function will append the drop-down menu to the referenced element.
- The second arguement will determine the main color of your dropdown.
- The third and fourth parameters determine the hover - and active colors of your drop-down.
- The fifth parameter sets the font-color.
- You can insert more arguements, each one creating a new anchor element in your drop-down.
The drop-down menu is generated with a completely random id - so you can create as many as you would like in the same page and you can reference each one individually.
This project is part of OTP's series on :Javascript In The Real World - Dynamic User Interface Interactions. The main idea is creating a reusable module and publishing to npm so it can be installed every-time it's needed. While researching for optimized ways to create and publish packages I came in contact with interesting concepts about how the industry approaches the procedure ,the importance of testing along with the use of compilers like babel (part of the bigger picture of an oprimized build), and the many intricate ways webpack handles dependencies allowing a dynamic modular approach to development . This lead to a deeper understanding of the importance of the steps someone might choose to take in the production procedure.