drop-down-menu-module

Drop-down Menu

The Odin Project - Exercise Drop Down Menu.

Create dropdown buttons wherever you want inside you webpage.

Getting Started

You can download it from npm

npm i drop-down-menu-module

First you need to create an array of list elements

let arr = [];
for(let i = 0; i < 5; i++){
    let item = document.createElement("li");
    item.innerHTML = "test-" + i;
    arr.push(item);
}

Then you create a new Dropdown object

/* Dropdown(widthSize, menuTitle, listElementsArray) */
let myDropdown = new Dropdown(100, "myMenu", arr);

And add the Dropdown object to your webpage with the render method

/* Body can be any HTML container */
body.appendChild(myDropdown.render());

You also can add more items to the dropdown after creating the object with the addElement method.

let myNewElement = document.createElement("li");
myNewElement.innerHTML = "New Element";
myDropdown.addElement(myNewElement);

And remove elements with the removeElement method

/* We pass the index of the element we want to remove */
myDropdown.removeElement(0);

And with every modification you need to recall the render method

myDropdown.render();

What have I learned?

• Create a JavaScript Library.

Acknowledgement

This project was made posible thanks to The Odin Project.

License

MIT.