nav-menu-js
v1.0.2
Published
Simple JS navigation module(includes links "click" and "mouseover" events)" for your website, which gives you possibility to get rid of routine.
Downloads
15
Maintainers
Readme
Simple JS 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>