Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dmitriyakkerman/nav-menu-js
Javascript navigation module for your website, which gives you possibility to get rid of routine.
https://github.com/dmitriyakkerman/nav-menu-js
javascript menu multiple-level-menu nav navigation
Last synced: 3 days ago
JSON representation
Javascript navigation module for your website, which gives you possibility to get rid of routine.
- Host: GitHub
- URL: https://github.com/dmitriyakkerman/nav-menu-js
- Owner: dmitriyakkerman
- Created: 2020-04-28T12:25:28.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T07:59:37.000Z (almost 2 years ago)
- Last Synced: 2024-04-26T15:05:19.583Z (7 months ago)
- Topics: javascript, menu, multiple-level-menu, nav, navigation
- Language: JavaScript
- Homepage:
- Size: 522 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
[](https://travis-ci.org/github/dmitriyakkerman/nav-menu-js)
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:
```js
let NavMenu = require('nav-menu-js');
or
import NavMenu from 'nav-menu-js';
```
Load the required stylesheet to your entry CSS file:
```css
@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:
```html
```
Put the module script at the bottom of your markup:
```html
```
**Usage**
Create typical navigation structure with nested lists.
```html
```
**Initialization**
1. Specify root selector(string or DOM node) in "nav" option.
2. Specify "preventParentClick" option for preventing click event on parent links which have child elements("false" by default).
Initialization with script tag
```js
document.addEventListener('DOMContentLoaded', function () {
new NavMenu({
nav: '.header-nav',
preventParentClick: true
});
});
```
or
Initialization by creating [filename].js file and connecting in a script tag
```js
// init.js
document.addEventListener('DOMContentLoaded', function () {
new NavMenu({
nav: '.header-nav',
preventParentClick: true
});
});
```