The nav-menu-js from dmitriyakkerman

nav-menu-js's Introduction

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>

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>

Recommend Projects