# jsDropdownMenu

Simple drop-down menu.

## Installation

```npm i js-dropdown-menu```

## How to use

Paste to between head tag 

```
<script type="application/javascript" src="../dist/jsDropdownMenu.js"></script>
<script>
    new jsDropdownMenu.defult();
</script>
```

Use as import module
```
import JsDropdownMenu from 'js-dropdown-menu/dist/jsDropdownMenu';

new JsDropdownMenu();
```

For add support internet explorer add polyfill for closest.

```dist/polyfillClosest.js```

Example: 
```
<!DOCTYPE html>
<html>
<head>
    <![if !IE]>
    <script type="application/javascript" src="../dist/polyfillClosest.js"></script>
    <![endif]>
    <script type="application/javascript" src="../dist/jsDropdownMenu.js"></script>
    <style>
        ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        ul li {
            width: 100px;
            float: left;
            background: #dbdbdb;
            line-height: 2em;
            text-align: center;
            margin: 0 5px;
            cursor: pointer;
        }

        ul li span {
            display: block;
        }

        ul li ul {
            display: none;
        }

        ul .dropdown-menu-show ul {
            display: block;
        }
    </style>
</head>
<body>
<ul>
    <li class="dropdown-menu">
        <span class="dropdown-menu-button">Item 1</span>
        <ul>
            <li>Sub Item 1</li>
            <li>Sub Item 2</li>
        </ul>
    </li>
    <li class="dropdown-menu">
        <span class="dropdown-menu-button">Item 2</span>
        <ul>
            <li>Sub Item 1</li>
            <li>Sub Item 2</li>
        </ul>
    </li>
    <li class="dropdown-menu">
        <span class="dropdown-menu-button">Item 3</span>
        <ul>
            <li>Sub Item 1</li>
            <li>Sub Item 2</li>
        </ul>
    </li>
    <li class="dropdown-menu">
        <span class="dropdown-menu-button">Item 4</span>
        <ul>
            <li>Sub Item 1</li>
            <li>Sub Item 2</li>
        </ul>
    </li>
</ul>
<script>
    new jsDropdownMenu.defult();
</script>
</body>
</html>
```