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.