nav.js is a JavaScript library for creating an opening and closing navbar. It provides all of the logic necessary, you just provide the styles! And, at just 612 bytes minified & gzipped, it won't hurt your site's load time.
nav.js is easy to use. Add the script to your page, create a new Nav(), pass in any configurations you need, and call enable().
<!-- Include the minified source file. -->
<script src="nav.min.js"></script>
<!-- The body will get the `nav-open` class
when the toggle is clicked -->
<body>
<!-- The nav will also get the `nav-open` class
when the toggle is clicked -->
<nav id="my-nav">
<!-- This button, when clicked, will open the nav -->
<div class="nav-toggle"></div>
</nav>
</body>As a reminder, this nav.js doesn't provide any actual navbar styles. It's up to you what you want your navbar to look like! Make sure to style the body and navbar in both open and non-open states!
body.nav-open {
// Styles
}
#my-nav:not(.nav-open) {
// Closed Styles
}
#my-nav.nav-open {
// Open Styles
}var staple = new Nav({
navId: 'my-nav'
}).enable();The Nav constructor will setup the new Nav. You can customize the instance by passing the options parameter. The example below uses all options and their defaults:
var opts = {
navId: 'nav',
classPrefix: 'nav',
beforeOpen: function(resolve, reject) { resolve(); },
afterOpen: function() {},
onOpenError: function(errorData) {},
beforeClose: function(resolve, reject) { resolve(); },
afterClose: function() {},
onCloseError: function(errorData) {},
};
var nav = new Nav(opts).enable();Type:
ObjectDefault: See below
Description: Configuration options.
Type:
stringDefault:
'nav'Description: The CSS ID of navbar.
Type:
stringDefault:
'nav'Description: The prefix associated with this library that should be prepended to class names within the navbar, and open states on the navbar and body.
Type:
functionDefault:
function(resolve, reject) { resolve(); }Description: Called before the navbar is opened.
Parameters:
resolvefunction - call this to open the navbar.rejectfunction - call this with any arbitraryerrorDataattribute, to callonOpenError.
Type: Function
Default: function() { }
Description: Called after the navbar is opened.
Type: Function
Default: function(errorData) { }
Description: Called if there was an error opening the navbar.
Parameters:
errorDataobject - arbitrary error data passed from calling therejectfunction inbeforeOpen.
Type: Function
Default: function(resolve, reject) { resolve(); }
Description: called before the navbar is closed.
Parameters:
resolvefunction - call this to close the navbar.rejectfunction - call this with any arbitraryerrorDataattribute, to callonCloseError.
Type: Function
Default: function() { }
Description: Called after the navbar is closed.
Type: Function
Default: function(errorData) { }
Description: Called if there was an error closing the navbar.
Parameters:
errorDataobject - arbitrary error data passed from calling therejectfunction inbeforeClose.
Enable the nav toggle.
Disables the nav toggle, and close the navbar.
Opens the nav, adding the nav-open class on both the and on
the navbar itself.
Note: the class prefix
navcan be modified through theclassPrefixparameter to thenew Nav()constructor.
Closes the nav, removing the nav-open class on both the and on
the navbar itself.
Note: the class prefix
navcan be modified through theclassPrefixparameter to thenew Nav()constructor.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent