kslau07 / dropdown-menu

Create a dropdown menu using HTML, and JavaScript (from the Odin Project curriculum).

Odin Project (short)

Links

Link to Project Specs

Freecodecamp Dropdown Menu Tutorial.

Tech Used

• Html, CSS, JavaScript, NPM, WebPack

Description (from Odin)

Drop-down menus

A dropdown is something you’ve most likely encountered on various other websites you’ve visited or apps you’ve used. Imagine any time you’ve clicked a button (usually one that contained an icon of 3 horizontal or vertical dots or lines) and a list of items suddenly appeared (you could even say these items… dropped down from the button).

Dropdowns are typically comprised of two main parts:

A button that toggles the dropdown content’s visibility. The dropdown contents itself. The dropdown toggle button should typically only trigger the visibility of the dropdown content on click, while the dropdown contents should typically only contain items that will trigger an action upon clicking them. Actions can include things like “Edit”, “Copy”, or “Delete”, or linking you to another part of the site, such as in a navbar.

Build a dropdown menu

You can allow the menu to show up either on click or on hover.

You should hard-code the menu items into your HTML but hide/reveal them using JavaScript. You can do this either by adding a class (visible or something) or by manually setting the style in JS.

Make sure the JavaScript code is reusable! You should be able to create multiple drop-downs on a page using HTML and reuse the JavaScript logic to hide/reveal them.

If you bundle your code into a module you can publish your package to npm, and then install and use it anytime you like! Nothing like publishing your own modules to make you feel like a pro 😎.