fullnav.js

Click here to show the fullpage navigation!

fullnav.js is a jQuery plugin that lets you make full page navigation super easily! It is pretty simple and fully customizable!

To use it:

  1. Include the jQuery library and then jquery.fullnav.js file just after the closing body tag!
  2. Add the template tag that has html list like the following:
    <template id="nav-template">
    	<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>
    </template>
  3. Then add this bit of jQuery
    $('#nav-template').fullNav();
  4. If you want to customize you do so by providing in your options:
    $('#nav-template').fullNav({ background: 'black'});

    You can see a number of options here.

  5. To open the full page navigation you need to add data-showfullnav attribute to any element and whenever this element is clicked the navigation will be shown. For example:
    <a href="#" data-showfullnav>Navigation</a>

That's it you are done. Enjoy!

Options

Option Description Default Example
background The background of the overlay 'rgba(52, 152, 219,1)' 'black'
color The color of the text 'white' 'red'
linkPadding The padding between navigation links '10px' '20px'
fontSize The font size '3em' '2em'
linkBackground The background of the individual links 'transparent' 'grey'
fontFamily The font family of the links 'Helvetica' 'Arial'
hoverColor The color of the links on hover 'rgb(196, 196, 196)' 'green'
fade Whether you want to allow fade effect true false
closeContent HTML for your close button 'X' '<img src="path/to/your/close-icon/">'