Minimal Accessible Dropdown Menu With Vanilla JavaScript

Category: Javascript , Menu & Navigation | December 15, 2022
Author:The73756
Views Total:836 views
Official Page:Go to website
Last Update:December 15, 2022
License:MIT

Preview:

Minimal Accessible Dropdown Menu With Vanilla JavaScript

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

You Might Be Interested In:


Leave a Reply