js-dropdown-menu
Version:
Simple drop-down menu.
106 lines (91 loc) • 2.23 kB
Markdown
# 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:
```
<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>
```