How to install and use aadheuss-dropdown

aadheuss-dropdown is a simple dropdown function that will initiate all your dropdown with its styling and toggle functionality.

npm install aadheuss-dropdown

on you html file:

• add "dropdown" class to initiate your dropdown container.
• to initiate dropdown with classic icon add a class of "classic" to the "dropdown" element.
• inside the container specify the dropdown button to toggle the dropdown menu view by adding a class of "dropdown-btn".
• to create a dropdown menu that will be viewed when the dropdown-btn is clicked, add an element inside the container with "dropdown-menu" class.
• to specify vertical "dropdown-menu" position add "top"/"bottom", top will put the "dropdown-menu" on top of the "dropdown-btn" element. while "bottom" will put it on the bottom.
• to specify horizontal "dropdown-menu" position add "right"/"left", right will align the "dropdown-menu" to the right while left will align it to the left
• add items to the dropdown menu using children with class "dropdown-item".

Example:

<div class="dropdown classic">
  <button class="dropdown-btn" type="button">Dropdown</button>
  <div class="dropdown-menu bottom left">
    <button class="dropdown-item" type="button">item-1</button>
    <button class="dropdown-item" type="button">item-2</button>
    <button class="dropdown-item" type="button">item-3</button>
  </div>
</div>

on your javascript file

import activateAllDropdown from 'aadheuss-dropdown/dropdown'.
import 'aadheuss-dropdown/dropdown.css'.
use activateAllDropdown to activate the dropdown.

aadheuss-dropdown dropdown use the following css rules for its color scheme

:root {
  --pseudo-size: 0.25em;
  --padding-dropdown-x: 0.6em;
  --padding-dropdown-y: 0.3em;
  --dropdown-menu-border-color: #e3e4e0;
  --dropdown-hover-color: #57b3ff;
  --dropdown-selected-color: #b0b0b0;
}

• pseudo-size used as classic dropdown icon size.
• padding-dropdown-x used as horizontal padding.
• padding-dropdown-y used as vertical padding.
• dropdown-border-color used as border color for the dropdown-menu.
• dropdown-hover-color used as the dropdown menu background color on hover.
• dropdown-selected-color used as the dropdown menu selected item background color.