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!
jquery.fullnav.js
file just after the closing body tag!
<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>
$('#nav-template').fullNav();
$('#nav-template').fullNav({ background: 'black'});
You can see a number of options here.
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>
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/">' |