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## ORbower install nifty-nav --save
To use the default settings:
To customize the settings, copy
settings.scss to your project folder and include
nifty-nav. This example moves
settings.scss to a folder called
settings and renames it to
nifty-nav.js in your build either inline or within a Gulp or Grunt
To use Nifty Nav without compiling and with the default settings, clone the Nifty Nav repo and use
nifty-nav.min.css found in
nifty-nav.min.js found in
To add the hamburger to your site:
Nifty Nav has five
jQuery settings, and some
subMenuscontrols if Nifty Nav should allow toggling of sub-menus. Default:
subMenuParentLinkcontrols if a parent menu navigation link should be followed when clicked. Default:
maskcontrols if Nifty Nav should show the mask that covers the page. Default:
itemClickClosecontrols if Nifty Nav should close when a nav item with the class of
nifty-nav-itemis clicked. Default:
panelPositionlets you control the
display:value of the
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
Scss settings control visual aspects of nifty nav:
$header-indexsets the z-index of the
$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 is
true. If false, the hamburger floats to the right.
To use Nifty Nav, initialize it at the bottom of your page before the closing
// Nifty Nav with default settings;// Nifty Nav without the mask and with sub-menu toggles;
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.