1.0.0 • Published 2 years ago

@kgarvey92/drop-down-module v1.0.0

Weekly downloads
-
License
ISC
Repository
github
Last release
2 years ago

drop-down-module

module to create re-usable drop-down menus.

installation

  • -- npm install tba
  • Add the following css to your styles:
.dropdown-parent {
  position: relative;
}

.dropdown-child {
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 0;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
  transition: opacity 0.2s ease-in-out;
}

.dropdown-parent.open .dropdown-child {
  opacity: 1;
  pointer-events: auto;
}
  • Assign dropdown-parent to desired parent elements and dropdown-child to corresponding child container (the dropdown menu).
  • Can use pre-existing class names provided you add the appropriate properties and feed in the correct parameters to the createDropdown function.

Usage

  • Import:

import createDropdown from 'drop-down-module';

  • Function arguments:
function createDropdown(eventType = 'click', parentSelector='.dropdown-parent', childSelector='.dropdown-child')
  • First argument accepts optional parameter 'hover', to change dropdown behaviour to hover.
  • Provide additional arguments if using custom class names.

nrFTFWao7zU573

1.0.0

2 years ago