@freeloader/dropdown-menu
v0.2.1
Published
A simple dropdown-menu component
Downloads
6
Readme
Example Code
<nav>
<ul>
<li><a href="#">Home</a></li>
<li class="dropdown">
<a href="#">Contact</a>
<ul class="dropdown-menu">
<li>EMAIL</li>
<li>PHONE NO</li>
<li>ADDRESS</li>
</ul>
</li>
<li><a href="#">About</a></li>
</ul>
</nav>
Usage
First thing first run the following command to install the package.
npm install @freeloader/dropdown-menu
Then you can include two files from src directory of the repository, dropdown.js
and dropdown.css
, in your HTML like this:
<head>
<link rel="stylesheet" href="dropdown.css">
<script defer src="dropdown.js"></script>
</head>
If you want a minified version, you can run the following command and include the resulting dropdown.bundle.js
file in your HTML.
npm run build
<head>
<script src="dropdown.bundle.js"></script>
</head>
Notice that you don't need to include the css file because css has already been bundled up with the minified javascript. You don't also need defer attribute. Setting defer attribute will load the css after the html has been parsed and it can show "ugly" html for a moment before css kicks in.
Make sure to include two original source file, dropdown.js
and dropdown.css
, as JavaScript license web labels if you're going to use the minified javascript.
Debugging
Run npm run test
in the package directory after installing it and webpack will bundle the debugged javascript file with inline source map.