A simple yet fully customizable drop-down-menu

This module works with 3 parameters.

NB: Make sure parent element and it's children follow correct hierarchy.

1. Parameter-1 - A Unique parent element selector, eg: <#elementID> or <.elementClassName>

2. Parameter-2 - The First Child as Title: div element, eg: <#elementID> or <.elementClassName>

3. Parameter-3 - The Second Child as List: ordered or Unordered List element, eg: <#elementID> or <.elementClassName>

Code example (module imported as menuDisplay):

html

<nav>
    <menu class="menuItem1">
        <div class="title">Button-1</div>
        <ul class="drop-down-list">
            <li>List item 1</li>
            <li>List item 2</li>
            <li>List item 3</li>
        </ul>
    </menu>
    <menu class="menuItem2">
        <div class="title">Button-2</div>
        <ul class="drop-down-list">
            <li>List item 1</li>
            <li>List item 2</li>
            <li>List item 3</li>
        </ul>
    </menu>
    <menu class="menuItem3">
        <div class="title">Button-3</div>
        <ul class="drop-down-list">
            <li>List item 1</li>
            <li>List item 2</li>
            <li>List item 3</li>
        </ul>
    </menu>
</nav>

javascript

menuDisplay(".menuItem1", ".title", "ul")
menuDisplay(".menuItem2", ".title", "ul")
menuDisplay(".menuItem3", ".title", "ul")