This is a script that most web developers need for a quick site navigation, built with Native Javascript and supported on all major browsers as well as legacy browsers starting with IE8.
Download the package and check the demo folder, or check it online here.
- opens submenus on mouseenter, by adding
openandopen-positionclasses to the menu item, in rapid succession - hides submenus on mouseleave, by removing the above classes in a delayed succesion
- super light script,
1.2kin size when minified - responsive design ready
- super light and easy to customize CSS
- 3 sets of positions top (main), left or right
- animations are based on position
- LESS/SCSS sources ready
- DATA API allows you to automatically initiate without JS invocation
- cross-browser supported
You can install this through NPM or bower respectively:
$ npm install navbar.js
# or
$ bower install navbar.js
Download the latest package. unpack and inspect the contents. You need to copy the navbar.js and navbar.css or their minified variations to your app assets folders as follows.
Link the required CSS in your document <head> tag
<link href="../assets/css/navbar.css" rel="stylesheet">Link the required JS in your document <body> tag
<script src="../assets/js/navbar.js"></script>Initiate the function for your elements at the end of your <body> tag
<script>
var myMenu = new Navbar('selector');
</script>To use the DATA-API, you need to provide the data-function="navbar" attribute to your menu, like so:
<ul class="nav" data-function="navbar">
<li><a href="#">Link Title</a></li>
<li><a href="#">Another Link Title</a></li>
</ul>
Legacy browsers need classList polyfill, so give them minifill.
On node.js environments
// get and store it
var Navbar = require("navbar.js");
// initialize it
var myMenu = new Navbar('selector');You have 3 build tools for building custom builds
$ npm run min-js- to minify the navbar.js$ npm run build-less- to compile and minify the navbar.less$ npm run build-scss- to compile and minify the navbar.scss