Minimal Accessible Dropdown Menu With Vanilla JavaScript

Preview:

Description:

This is a simple, clean and accessible dropdown menu made with HTML, CSS, and vanilla JavaScript. It has no dependencies,  doesn’t use any framework or JavaScript library.

It is responsive and adaptive so it adjusts to various resolutions and devices. It’s fully customizable (you can edit the colors, font, text size, and structure easily for example) so you can change it to fit your design needs.

How to use it:

1. Download and load the dropdown.min.js script in the document.

<script src="dropdown.min.js" defer></script>

2. Add menu links together with a toggle button to the dropdown menu as follows:

<div class="dropdown">
  <button class="dropdown-toggle" data-dd-target="first" aria-label="Dropdown Menu">
    Dropdown Button
  </button>
  <div class="dropdown-menu" data-dd-path="first">
    <a class="dropdown-menu__link" href="#1">Link 1</a>
    <a class="dropdown-menu__link" href="#2">Link 2</a>
    <a class="dropdown-menu__link" href="#3">Link 3</a>
    ...
  </div>
</div>

3. Apply your own styles to the dropdown menu.

.dropdown {
  position: relative;
  display: inline-block;
}
.dropdown-toggle {
  display: inline-block;
  padding: 10px 20px;
  background-color: #025fff;
  border-color: #025fff;
  color: #fff;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color ease-in-out 0.3s;
}
.dropdown-toggle:hover {
  background-color: #004cce;
}
.dropdown-menu {
  position: absolute;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
  top: 100%;
  left: 0;
  z-index: 999;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  background-color: #fff;
  min-width: 100%;
  padding: 10px 0;
}
.dropdown-menu--active {
  opacity: 1;
  visibility: visible;
}
.dropdown-menu__link {
  display: block;
  margin: 0;
  padding: 0;
  width: 100%;
  padding: 7px 10px;
  background-color: transparent;
  border: none;
  text-decoration: none;
  color: black;
}
.dropdown-menu__link--active {
  background-color:  rgba(0, 0, 0, 0.15);
}
.dropdown-menu__link:hover {
  background-color: rgba(0, 0, 0, 0.15);
}

Changelog:

12/15/2022

• Bugfixes