NVJS_Menu - is the free and responsive menu script, which used for creating open/close menu and set events on it.
- No dependencies
- All modern browsers are supported
- Fully responsive
NVJS_Menu is not compatible with all platforms, because it used ES6. it is a modern menu which is focused only on modern apps/platforms to bring the best experience and simplicity.
- Edge
- Chrome
- Safari
- Mobile Safari
- Android Default Browser
Dist / Build description is available on Dist / Build documentation.
API description is available on API documentation.
<!DOCTYPE html>
<html lang="en">
<head>
...
<link rel="stylesheet" href="path/to/NVJS_Menu.css">
</head>
<body>
...
<script src="path/to/NVJS_Menu.js"></script>
</body>
</html><header class="header">
<div class="header__wrapper">
<a class="header__logo" href="/">Logo</a>
<nav class="header__menu">
<li class="header__menu__item">
<a class="header__menu__link" href="/">
Example
</a>
</li>
<li class="header__menu__item">
<a class="header__menu__link" href="/">
Example
</a>
</li>
<li class="header__menu__item">
<a class="header__menu__link" href="/">
Something Else
</a>
</li>
</nav>
<div class="hamburger">
<div class="hamburger__item"></div>
</div>
</div>
</header>let menu = new NVJSMenu('.header',{
menuShowButtons: '.hamburger',
menu: '.header__menu',
menuOpenClass: 'open',
autoInitialize: true,
lockBody: true,
on: {
initialized: () => {
console.log('initialized')
},
toggle: {
elements: ['header', 'menuShowButtons', 'menu',
activeClass: 'open',
addClass: true
},
scroll: {
sensivity: 20,
activeClass: 'scrolled',
addClass: true
},
scrollToTop: {
activeClass: 'scrolledToTop',
},
scrollToBottom: {
activeClass: 'scrolledToBottom',
}
}
}, true);Changelog is available on Changelog documentation.
NVJS_Menu is licensed WTFPL. You can use it for free and without any attribution, in any personal or commercial project. You may also fork the project and re-release it under another license you prefer.