Lightweight & Customizable jQuery Full Page Navigation Plugin - fullnav.js

fullnav.js is a lightweight jQuery plugin to create a customizable modal-style navigation with a full page overlay covering the entire screen.

See also:

• Responsive fullscreen Overlay navigation with jQuery and Velocity.js
• Mic.com Style fullscreen navigation with jQuery and CSS3
• Flexible fullscreen navigation Menu with jQuery and CSS3
• Responsive & Dynamic Full Screen navigation Plugin - fullpagenav

How to use it:

1. Load the latest version of jQuery and the fullnav.js script at the end of your document.

<script src="//code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="js/jquery.fullnav.js"></script>

2. Markup your HTML with a basic nav list.

<nav id="nav-demo">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

3. Add a link with the data-showfullnav attribute to toggle the full page navigation.

<a href="#" data-showfullnav>Click here</a>

4. Call the function on the nav list to create a full page navigation with default options & styles.

$('#nav-demo').fullNav();

5. Full options and defaults.

// The background of the overlay
background: 'rgba(52, 152, 219,1)',

// The color of the text
color: 'white',

// The padding between navigation links
linkPadding: '10px',

// The font size
fontSize: '3em',

// The background of the individual links
linkBackground: 'transparent',

// The font family of the links
fontFamily: 'Helvetica',

// The color of the links on hover
hoverColor: 'rgb(196, 196, 196)',

// Whether you want to allow fade effect
fade: true,

// HTML for your close button
closeContent: 'X'

---

This awesome jQuery plugin is developed by iamfaiz. For more Advanced Usages, please check the demo page or visit the official website.