@jesperkov/create-dropdown v2.0.1
create-dropdown
create-dropdown, brought to you by jesperkov.
This is a JS module that allows you to easily create styled dropdown menus.
Demo
Prerequisites
- A module bundler (i.e. Webpack, Browserify, etc.)
Installation
npm i @jesperkov/create-dropdown
Usage
To avoid unwanted errors, copy and paste the code below and modify it to fit your application.
HTML
Format your dropdown like so:
<div class = "dropdown-menu">
<div class = "expand-button">
<span> Expand Me <span>
</div>
<div class = "options">
<div class = "option">
<span>Option 1</span>
</div>
<div class = "option">
<span>Option 2</span>
</div>
<div class = "option">
<span>Option 3</span>
</div>
</div>
</div>
WARNING: DO NOT FORGET TO INCLUDE THE SPANS
Javascript
Your Javascript will simply need to look like this:
import createDropdown from "@jesperkov/create-dropdown";
const dropdownMenu = document.querySelector('.dropdown-menu');
const expandButton = document.querySelector('.expand-button');
const options = document.querySelector('.options');
createDropdown(dropdownMenu, expandButton, options);
And thats it! No CSS is required, as the styling will be taken care of by the createDropdown function. However, if you want to modify the style or create your own, this is entirely possible by simply selected the elements from your own CSS stylesheet.
Optional
We advise you to set the opacity of the options div to 0 on your own CSS stylesheet. Since the styling is done by Javascript, there is a possibility that you may get an unwanted flash of the options div before the script loads and hides it. By setting the opacity to 0 on your own stylesheet, you can avoid this potential problem entirely.