A customizable JavaScript menu framework for modern browsers made easy.
Add Nifty Nav 2 to your project using your favorite package manager.
npm install nifty-nav-2 --save
yarn add nifty-nav-2
Import the Nifty Nav 2 css or scss, or ensure it is included in your build. The following
is using scss to import from node_modules
. Alternatively, you could copy niftyNav2.css
from node_modules
to your project.
// include nifty nav 2 styles
@import 'nifty-nav-2/dist/niftyNav2.css'
How you include the Nifty Nav 2 JavaScript library is up to you and the architecture
of your project. Nifty Nav 2 is available as a UMD module so it can be used as a
AMD, Global, Node, or ES6 module. The compiled JavaScript file found in dist/
contains
the babel-polyfill
to ensure proper cross browser support.
Copy the niftyNav2.js
file in nifty-nav-2/dist
to your project directory and include
in your HTML. You do not need to include any polyfills, as they are bundled directly
into dist/niftyNav2.js
.
<html>
<body>
<!-- Your HTML Content -->
<script src="path_to_your_assets/js/niftyNav2.js"></script>
</body>
</html>
A Gulp implementation that concatenates JS files may look something like this.
var concatFiles = [
'./node_modules/nifty-nav-2/dist/niftyNav2.js', // adds niftyNav2.js to be concatenated
'./assets/js/*.js', // grabs all js files from our assets/js folder
'!./assets/js/*.min.js', // ignore minified files
]
// Concatenate & Minify JavaScript
gulp.task('scripts', ['lint'], function() {
return gulp.src( concatFiles )
.pipe(concat( 'all.js' ))
.pipe(gulp.dest( './assets/js/' ))
.pipe(rename('all.min.js'))
.pipe(uglify())
.pipe(gulp.dest( './assets/js/' ))
});
import niftyNav2 from 'nifty-nav-2';
Place the trigger or "hamburger". You can place this wherever you want it to appear in the DOM.
<div data-nifty-target="niftyNav"></div>
Your element must have a data-nifty-target
attribute with a unique name. Here,
we are simply calling it niftyNav
but it can be anything you wish. If changed from
the default niftyNav
be sure to pass that via settings when initializing.
Add the panel that will be opened on click. The ID should match the value of data-nifty-target
.
<div id="niftyNav">
<!--Panel Contents -->
</div>
Initialize Nifty Nav 2 via JavaScript. The following is an example with settings
for iconColor
and panelColor
.
<script>
niftyNav2.init({
iconColor: 'rgb(123, 249, 158)',
panelColor: 'rgb(123, 249, 158)',
});
</script>
There is currently no built-in support for submenu toggling. However, this can easily be added via a custom function. Here is one possible solution using jQuery and typical WordPress markup.
jQuery( document ).ready(function( $ ) {
// Sub-menu toggling
$('.nav--mobile .menu-item-has-children > a').on('click', function(e) {
e.preventDefault();
$(this).siblings('.sub-menu').slideToggle();
});
});
There are plenty settings that can be used to customize Nifty Nav 2.
Setting | Description | Accepts | Default |
---|---|---|---|
targets |
Targets to create/use Nifty Nav 2 (from data-nifty-target ) |
array | ['niftyNav'] |
icon |
Icon style to be used | string - square, rounded | square |
iconColor |
Color to be applied to the icon | string | #fff |
showMenuText |
Show or hide text next to the icon | boolean | false |
menuText |
Text to appear when showMenuText is true |
string | Menu |
menuTextColor |
Color to be applied to menuText |
string | #fff |
panelOrigin |
Placement of where the Nifty Nav 2 panel will animate from | string - top, left, right | top |
panelTopOffset |
Top offset for the panel | integer | 0 |
panelPosition |
CSS positioning for the panel | string | absolute |
panelHeight |
Height to be applied to the panel | string | auto |
panelWidth |
Width to be applied to the panel | string | 100% |
panelAnimation |
Type of animation for the panel | string - slide-in, fade-in, off | slide-in |
panelAnimationSpeed |
Speed of panel animation | integer | 500 |
panelColor |
Color to be applied to the background of the panel | string | #2d2d2d |
showMask |
Show or hide the mask/overlay | boolean | true |
maskAnimationSpeed |
Speed at which the mask/overlay animates in | integer | 600 |
maskColor |
Color to be applied to the mask/overlay | string | rgba(0,0,0,0.5) |
There are a few API Methods available to you if you should need them.
Method | Description | Accepts | Default |
---|---|---|---|
onToggle |
Accepts a function that runs when togglePanel is fired |
x | x |
toggleIcons |
Toggles the state of all icons | x | x |
toggleMask |
Toggles the mask when used | x | x |
togglePanel |
Toggles the panel when used | panelId which is generated from the targets options |
none |
Current browser support as of v0.1.0.
Browser | Support | Notes |
---|---|---|
Edge 16+ | β | |
Edge <= 15 | β | |
IE 11 | β | |
IE 10 | May need CSS to adjust hamburger and menu text placement, core functionality is OK | |
Firefox 51+ | β | |
Chrome 51+ | β | |
Safari 9.1+ | β |
Feel free to open an issue or a pull request if you find any issues or enhancements.
The changelog can be found here.