render-dropdown-menu v1.1.0

dropdown-menu

How To Install

Use webpack for bundling...

npm install render-dropdown-menu

How To Use

renderDropdownMenu(targetId, buttonObject, menuArray, menuStyles, listStyles);

targetId: (REQUIRED) Id of the div which will act as the parent of the dropdown button and menu buttonObject: (REQUIRED) Object to specify textContent and any attributes of the button menuArray: (REQUIRED) Array of objects to specify the menu items and links menuStyles: (OPTIONAL) Array of strings to define CSS rules of the menu listStyles: (OPTIONAL) Array of strings to define CSS rules of the list

Example

renderDropdownMenu(
  "dropdownDiv",
  { textContent: "button" },
  [
    { textContent: "Item 1", link: "#" },
    { textContent: "Item2", link: "#" },
  ],
  ["background-color: black", "border: 1px solid red"],
  ["border: 1px solid white"]
);

Caution

Setting own CSS rules will override default CSS. Some rules might break functionality. If more customizing required, use these classes to select the element in the CSS file:

For the menu: 'dropdown-menu-list' For the list-items: 'dropdown-menu-list-item' Class applied when dropdown visible: 'active'

(Position of the parent element will be set to relative, any change will alter position of the dropdown)