Nifty Nav is a quick and easy navigation plugin using Sass and jQuery. It makes making navigation systems a little better. Built by the awesome people over at factor1.
npm install nifty-nav --save
## OR
bower install nifty-nav --save
To use the default settings:
@import nifty-nav/settings;
@import nifty-nav/nifty-nav;To customize the settings, copy settings.scss to your project folder and include
it before nifty-nav. This example moves settings.scss to a folder called
settings and renames it to nifty-nav-settings:
@import settings/nifty-nav-settings;
@import nifty-nav/nifty-nav;Include the nifty-nav.js in your build either inline or within a Gulp or Grunt
task.
To use Nifty Nav without compiling and with the default settings, clone the Nifty Nav repo and use
nifty-nav.min.css found in dist/css/ and nifty-nav.min.js found in dist/js/.
<html>
<head>
<link rel="stylesheet" href="path/to/file/nifty-nav.min.css">
</head>
<body>
...
<script src="path/to/file/nifty-nav.min.js"></script>
</body>
</html>To add the hamburger to your site:
<a id="nifty-nav-toggle"><span></span></a>Nifty Nav has five jQuery settings, and some scss settings.
subMenuscontrols if Nifty Nav should allow toggling of sub-menus. Default:false.subMenuParentLinkcontrols if a parent menu navigation link should be followed when clicked. Default:false.maskcontrols if Nifty Nav should show the mask that covers the page. Default:true.itemClickClosecontrols if Nifty Nav should close when a nav item with the class ofnifty-nav-itemis clicked. Default:true.panelPositionlets you control thedisplay:value of the.nifty-panelelement. Default:absolute.
NOTE: When using
panelPosition: 'fixed'a class of.nifty-lockis added to the<body>. This is to prevent the page from scrolling and allow the user to scroll through nav items instead. To change this functionality simply override the.nifty-lockclass.
Scss settings control visual aspects of nifty nav:
$header-indexsets the z-index of the<header>element$panel-colorsets the color of the dropdown.$panel-top-distancesets the panel distance from the top of the viewport.$panel-widthsets the panel width.$panel-indexsets the z-index of the Nifty Nav panel.$mask-colorsets the color and opacity of the mask.$mask-indexsets the z-index of the mask.$hamburger-colorsets the hamburger color.$hamburger-color-activesets the color of the hamburger when the panel is open.$hamburger-position-topsets the distance from the top of the containing element.$hamburger-position-xsets the distance from the left/right of the containing element.$hamburger-position-left- default istrue. If false, the hamburger floats to the right.
To use Nifty Nav, initialize it at the bottom of your page before the closing </body> or in an external JavaScript file (recommended).
// Nifty Nav with default settings
$(document).ready(function(){
$('#nifty-nav-toggle').niftyNav();
});
// Nifty Nav without the mask and with sub-menu toggles
$(document).ready(function(){
niftyNav({
mask: false,
subMenus: true
});
});If you have feedback, find a bug, or want to make contributions, please don't hesitate to open an issue or make a pull request.