Get started with easy drop-down-menu

Demo

1. Install this package -

npm install @iamzehan/drop-down-menu-iamzehan 

2. Import from dropdown menu maker and use it

😏 If you only want to apply the dropdown behaviour to your custom elements (which should abide by the convention of the Template) - See template

import { Dropdown } from "@iamzehan/dropdown-menu-iamzehan";

// If you want to use the drop down behaviour to your custom classes
const dropdownBtn = document.querySelector("button.your-custom-class");
dropdownBtn.classList.add(styles.dropDown);

//You asked for it not me
dropdownBtn.firstElementChild.classList.add(styles.icon);

const dropdownMenu = document.querySelector("ul.your-custom-class");

//
dropdownMenu.classList.add(styles.dropDownMenu);

// now use the behaviour
const dropdownAction = new Dropdown(dropdownBtn, dropdownMenu);
dropdownAction.handleEvent();

*** The following comes with default theme and behaviour included

// Your menu container
const content = document.querySelector(".container");

const dropdownBtn2 = new DropdownMaker("Menu", ["Item 1", "Item 2"]).get();

content.appendChild(dropdownBtn2.button);
content.appendChild(dropdownBtn2.menu);

3. Use your custom styles

Use module css for it to work. Customize the following classes for the best results. The following are the styles used in this package:

/* ./style.module.css  */


/* This the parent class you are going to use  to store our variables */

/* The following .container class should be the parent class of your 
dropdown button  and menu */

.container {
  --icofont: "Material Symbols Rounded";
  --accent-color: seagreen; /* Change the color here to change color theme*/
}

.icon {
  font-family: var(--icofont);
}

/* The dropdown button */
button.drop-down {
  display: flex;
  align-items: center;
  height: max-content;
  padding: 0.2em 0.5em;
  border-radius: 0.2em;
  border: 1px solid grey;
  color: grey;
  background-color: white;
  transition: 0.5s box-shadow ease;
  &:hover,
  &.active {
    border-color: var(--accent-color);
    background-color: var(--accent-color);
    color: white;
    box-shadow: 0 0 5px -1px var(--accent-color);
  }
}

/* Menu Wrapper */
ul.drop-down-menu {
  list-style: none;
  display: flex;
  flex-direction: column;
  transform: translateY(1.5em) scale(0);
  width: 100px;
  box-sizing: content-box;
  height: max-content;
  border-radius: 0.5em;
  box-shadow: 1px 1px 5px 0px var(--accent-color);
  color: grey;
  z-index: 1000;
  transform-origin: top left;
  transition: 0.3s transform ease-in-out;
}

/* Menu Individual Item designs */
.drop-down-menu > li {
  cursor: default;
  width: 100%;
  padding: 0.25em 1em;
  border-bottom: 0.01em solid rgba(137, 43, 226, 0.411);
  text-align: center;
  transition: 0.2s color ease-in-out, 0.2s background-color ease-in;
  &:hover {
    background-color: var(--accent-color);
    color: white;
  }
  &:first-of-type {
    border-radius: 0.5em 0.5em 0 0;
  }
  &:last-of-type {
    border-radius: 0 0 0.5em 0.5em;
  }
  &:active {
    background-color: white;
    color: var(--accent-color);
  }
}

/* Responsible for making the menu appear */
.drop-down-menu.visible {
  transform: translateY(1.5em) scale(1);
  transition: 0.1s transform ease-in-out;
}

Ofcourse you want more control, so here you go!

// Now import your custom styles that
import * as myStyles from "./style.module.css";

// Your menu container
const content = document.querySelector(".container");

const dropdownBtn2 = new DropdownMaker(
  "Menu",
  ["Item 1", "Item 2"],
  myStyles
).get();

content.appendChild(dropdownBtn2.button);
content.appendChild(dropdownBtn2.menu);

Template

<!-- Drop Down Menu -->
<div class="container">
  <button class="drop-down">
    Menu
    <span class="icon">arrow_drop_down</span>
  </button>
  <ul class="drop-down-menu">
    <li class="item" id="1">Item 1</li>
    <li class="item" id="2">Item 2</li>
    <li class="item" id="3">Item 3</li>
  </ul>
</div>

For further investigations, see the index.js file. Let me know what could be improved.

Made with