Simple Dropdown package

This is a simple dropdown menu package that can be applied easily to any project. It can be installed with npm install akw-simp-dd

The overall design is a box icon with three lines that turn into an X once clicked and toggle the appearance of a menu.

Use instructions

There are two components for this package: the dropdown.js and dropdown.scss. To set up, make sure you have two div elements specified: One which will be the actual icon, and another which is the menu to be toggled. An example for this can be found in the index.html file in this repo. I wanted this to be somewhat customizable, so you can specify the color, background color, and size of the icon. You also need to specify how the menu should appear before being activated, and after.

Setting up the icon

The menu icon should have a set height, width, background color, and color. The icon looks and functions best if it is a square rather than a rectangle, but feel free to play around with styling to find something that works best for your project. From there, just be sure to use sass to compile the dropdown.scss file into your main project.

Setting up the menu

You must decide how you wish your menu to appear and disappear once the icon is clicked. The module simply toggles the class .shown for whatever div you use for the menu portion.

inserting the package into your project

import the module into your main javascript file. From there, pick the div you want to use for your icon and for your menu, and call dropDownMaker.addDropDown(icon, menu). E.g.

import dropDownMaker from '../node_module/simple-drop-down/dropdown'

let icon = document.getElementById('icon');
let menu = document.getElementById('menu');
dropDownMaker.addDropDown(icon, menu);