Dynamic DropDown - CSS Styled

A simple npm package that lets you add dropDown elements to your DOM easily and dynamically

Adding dropDown to your navbar or other HTML elements is quite commonplace in today's modern web. This npm package was created with the hope to have a simple solution to adding as many dropdowns as needed to your webpage's DOM.

List of features

• User provides the id of the DOM element that the dropDown will be added to
• User provides the background color for the dropDown
• User provides the font color for the dropDown
• User provides an array of href and textContent that will be added to the dropDown

Download & Installation

$ npm i dynamic-dropdown-cssstyled

Usage example

<!-- index.html -->

<nav>
    <div>
        <button id='addDropDown'>DropDown</button>
    </div>
    <div>
        <button id='addAnotherDropDown'>Another One</button>
    </div>
</nav>    

// src/index.js

import addDropDown from "dynamic-dropdown-cssstyled";

addDropDown(
  elementToAddID,  // ID of HTML element to add dropDown to
  backgroundColor, // Color for dropDown background
  fontColor,       // Color for dropDown text
  contentToAdd     // Array of objects containing link for href as well as textContent for anchor tag
)

addDropDown("addDropDown", "#c8c6c6", "#4b6587", [
  {
    link: "http://www.google.com/",
    text: "Google",
  },
  {
    link: "https://github.com/Ishmam156",
    text: "My GitHub",
  },
]);

addDropDown("addAnotherDropDown", "pink", "purple", [
  {
    link: "http://www.google.com/",
    text: "Google",
  },
]);

Demo

Acknowledgements

• The Odin Project
• How To Create Advanced CSS Dropdown Menus - Web Dev Simplified

License

ISC

Authors

• Ishmam Chowdhury

Contributing

Contributions are always welcome!

Kindly do a pull request with your contribution.

Feedback

If you have any feedback, please reach out to me in GitHub.