Drop Down Menu

Drop down menu template

Usage

Installation and Setup

npm install --save @sh4dman23/drop-down-menu

Then, setup (in whichever way you prefer) your code to use style.css for the styles and script.js. For example, if you are using webpack, use the following import statement in your main js file.

import '@sh4dman23/drop-down-menu';

HTML Structure

Use the following structure in your HTML code to use the drop-down:

<!-- This contains the drop-down -->
<div class="dd-container">
    <div class="dd-current">
        <!-- Keep this empty -->
        <span class="dd-selected"></span>
    </div>
    <ul class="dd-list">
        <!-- Here, the value (if exists) will show up in the above span.dd-selected, else the textContent
        of the selected option -->
        <li value="Some Value">Option 1</li>

        <!-- Adding the selected attribute will automatically select this at page load.
            Adding multiple of these will result in the first being selected -->
        <li value="Option 2" selected>Option 2</li>
    </ul>
</div>

The selected item of the drop-down can be found anytime by selecting the div.dd-container and accessing it's dataset.selected property. Returns the value (or textContent) of the selected option, or null if no option is selected or, the value or textContent of the option are both empty.

demo.html also contains another example of it's use.