Javascript navigation module(includes links "click" and "mouseover" events)" for your website, which gives you possibility to get rid of routine.
Example:
https://codepen.io/mickyholbrook/pen/GRjqwJj
Installation:
npm
npm i nav-menu-js
Load the required JS to your entry JS file:
let NavMenu = require('nav-menu-js');
or
import NavMenu from 'nav-menu-js';
Load the required stylesheet to your entry CSS file:
@import "node_modules/nav-menu-js/index";
Cloning git repository
1. Go to your project directory
2. git clone https://github.com/dmitriyakkerman/nav-menu-js.git .
Put the required stylesheet link in HEAD tag:
<link rel="stylesheet" href="./dist/css/nav-menu.min.css">
Put the module script at the bottom of your markup:
<script src="./dist/js/nav-menu.min.js"></script>
Usage
Create typical navigation structure with nested lists.
<ul class="header-nav" role="navigation" aria-label="Header links">
<li>
<a href="">Home</a>
</li>
<li>
<a href="">About</a>
</li>
<li>
<a href="">Services</a>
<ul>
<li>
<a href="">Service 1</a>
</li>
<li>
<a href="">Service 2</a>
<ul>
<li>
<a href="">Service 2.1</a>
</li>
<li>
<a href="">Service 2.2</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="">Contact</a>
</li>
</ul>
Initialization
- Specify root selector(string or DOM node) in "nav" option.
- Specify "preventParentClick" option for preventing click event on parent links which have child elements("false" by default).
Initialization with script tag
<script>
document.addEventListener('DOMContentLoaded', function () {
new NavMenu({
nav: '.header-nav',
preventParentClick: true
});
});
</script>
or
Initialization by creating [filename].js file and connecting in a script tag
// init.js
document.addEventListener('DOMContentLoaded', function () {
new NavMenu({
nav: '.header-nav',
preventParentClick: true
});
});
<script src="init.js"></script>