Nifty Nav
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.
Getting Started
npm
or bower
1. Install Nifty Nav with npm install nifty-nav --save
## OR
bower install nifty-nav --save
.scss
file
2. Import the Nifty Nav styles & settings in your To use the default settings:
;;
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
:
;;
nifty-nav.js
3. Include the Include the nifty-nav.js
in your build either inline or within a Gulp or Grunt
task.
Quick Setup
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/
.
...
Adding The Hamburger
To add the hamburger to your site:
Nifty Nav Options/Settings
Nifty Nav has five jQuery
settings, and some scss
settings.
subMenus
controls if Nifty Nav should allow toggling of sub-menus. Default:false
.subMenuParentLink
controls if a parent menu navigation link should be followed when clicked. Default:false
.mask
controls if Nifty Nav should show the mask that covers the page. Default:true
.itemClickClose
controls if Nifty Nav should close when a nav item with the class ofnifty-nav-item
is clicked. Default:true
.panelPosition
lets you control thedisplay:
value of the.nifty-panel
element. Default:absolute
.
NOTE: When using
panelPosition: 'fixed'
a class of.nifty-lock
is 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-lock
class.
Scss
settings control visual aspects of nifty nav:
$header-index
sets the z-index of the<header>
element$panel-color
sets the color of the dropdown.$panel-top-distance
sets the panel distance from the top of the viewport.$panel-width
sets the panel width.$panel-index
sets the z-index of the Nifty Nav panel.$mask-color
sets the color and opacity of the mask.$mask-index
sets the z-index of the mask.$hamburger-color
sets the hamburger color.$hamburger-color-active
sets the color of the hamburger when the panel is open.$hamburger-position-top
sets the distance from the top of the containing element.$hamburger-position-x
sets the distance from the left/right of the containing element.$hamburger-position-left
- default istrue
. If false, the hamburger floats to the right.
Initializing Nifty Nav
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; // Nifty Nav without the mask and with sub-menu toggles;
Issues / Bugs / Contributions#
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.