Responsive & Dynamic Full Screen Navigation Plugin - fullpagenav

fullpagenav is an amazing jQuery plugin that turns an unordered list into a responsive and dynamic full page navigation with smooth transition animations. Instead of <a> tag, the plugin uses data-link attribute to add links to your navigation that will expand the clicked item to fullscreen and then redirect to the URL.

How to use it:

1. Include the latest jQuery javascript library and jQuery fullpagenav plugin in the footer of your web page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.fullpagenav.js"></script>

2. Markup html structure.

<ul class="demo">

<li class="nav1" data-link="#"> <img src="1.jpg">
<div class="content">
<h1><a href="#">Title 1</a></h1>
</div>
</li>

<li class="nav2" data-link="#"> <img src="2.jpg">
<div class="content">
<h1><a href="#">Title 2</a></h1>
</div>
</li>

...

</ul>

3. Add following CSS snippet to your CSS file and change it to your taste.

.fpn_body {
width: 100%;
height: 100%;
position: absolute;
}
.fullpagenav {
list-style: none;
padding: 0;
margin: 0;
position: relative;
height: 100%;
}
.fullpagenav > .fpn_li {
list-style: none;
padding: 0;
margin: 0;
position: absolute;
height: 100%;
top: 0;
left: 0;
bottom: 0;
}
.fullpagenav > .fpn_li > .fpn_wrap {
width: 100%;
height: 100%;
float: left;
}
.fullpagenav > .fpn_li:active {
z-index: 10;
}

4. Call the plugin with options.

<script>
$(document).ready( function() {
$(".demo").fullpagenav({
columns: 5,
selector: "> li",
hover_size: "30%",
animateDuration: 500,
animateFrom: "left",
clickable: true,
afterClicked: null
});
});
</script>

---

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