Minimal Accessible Dropdown Plugin - jQuery Aria Dropdown

Minimal Accessible Dropdown Plugin - jQuery Aria Dropdown
File Size: 45 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

A lightweight jQuery plugin for creating accessible dropdown lists/menus that follow the Accessible Rich Internet Applications (WAI-ARIA) specification.

How to use it:

1. The required html structure for the dropdown with a toggle button.

<div class="dropdown dropdown-demo">
  <button type="button" class="dropdown__btn">Dropdown</button>
  <div class="dropdown__collapse" id="demo">
    <h4>Dropdown</h4>
    <ul>
      <li>Link 1</li>
      <li>Link 2</li>
      <li>Link 3</li>
      <li>Link 4</li>
      <li>Link 5</li>
    </ul>
  </div>
</div>

2. Load jQuery library and the JavaScript file 'dropdown.js' in the html document.

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

3. Initialize the plugin to generate a basic accessible dropdown.

$('.dropdown-demo').ariaDropdown();

4. Apply you own styles to the accessible dropdown as follows.

.dropdown {
  display: inline-block;
  position: relative;
}

.dropdown__collapse {
  background-color: #fff;
  border: 0.1rem solid #dddddd;
  position: absolute;
  min-width: 10rem;
  padding: 0.5rem;
  z-index: 999;
}

.dropdown__collapse_center {
  left: 50%;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
}

.dropdown__collapse_right { right: 0; }

5. Config the accessible dropdown with the following options.

$('.dropdown-demo').ariaDropdown({
  btnClass: 'dropdown__btn',
  menuClass: 'dropdown__menu',
  dropdownExpandedClass: 'dropdown__expanded',
  btnExpandedClass: 'dropdown__btn_expanded',
  menuExpandedClass: 'dropdown__menu_expanded',
  slideSpeed: 300,
  easing: 'swing',
  collapseOnOutsideClick: true,
  collapseOnMenuClick: false,
  expandOnlyOne: true,
  expandZIndex: 10,
  collapseZIndex: 1,
  cssTransitions: false
});

Change log:

2017-10-08

  • v1.2.3

This awesome jQuery plugin is developed by DavideTriso. For more Advanced Usages, please check the demo page or visit the official website.