About
DropdownUtil is an intuitive, lightweight library that allows you to effortlessly create
Dropdown menus and content.
It uses a utility class system and associates dropdown triggers with
dropdown targets
To create a dropdown, you must declare an element to be a trigger. I.E. a title
or a button.
Every trigger must have a target. A target is an element who's contents will be
hidden by default until the trigger is activated.
A trigger will always chose the next target for a pair. This is not changeable.
How To Use
Using DropdownUtil is very simple. You only need to include it in your <head> tag
like so:
<script src="https://lib.jacq.dev/dd"></script>
The following utility classes will now be available:
- droptrigger: an element that will act as the trigger
- dropdown: an element that will be the target
This is all you need to do in order to get going with DropdownUtil! There is more
customisation available, read on to learn more.
Further Customisation
If you want to customise the library further, you can learn to do so here.
First, create your own copy of DropdownUtil, by copying/downloading the code available
here.
Once you've done that, you can edit the "dropdown" object's settings.
The following settings are the defaults:
start of dropdown.js
let dropdown = {
target: 'dropdown',
trigger: 'droptrigger',
opened: '\u25BE',
unopened: '\u25B8',
hoverable: true,
};
- Target: The class name for the targets
- Trigger: The class name for the triggers
- Unopened: The symbol next to the trigger to indicate the
target is closed
Defaults to a right-arrow (▸)
- Opened: The symbol next to the trigger to indicate the
target is opened
Defaults to a down-arrow (▾)
- Hoverable: Whether the trigger needs only a hover or if it can
be toggled with a click.
- true: The trigger needs only a hover to activate
- false: The trigger requires a click to toggle the dropdown
Notes
Please note that DropdownUtil will always
position targets absolutely, super-imposed on other content. This
makes it ideal for dropdown menus. If you are looking for a dropdown that
takes up space in the document, use ExpanderUtil.