Fullscreen Sliding Navigation with jQuery and CSS3 - menuFullpage

menuFullpage is a lightweight jQuery plugin to create a responsvie navigation overlay covering the whole page that slides out from the edge of your screen.

See also:

• Fullscreen Off-canvas Navigation with jQuery and CSS3
• Fullscreen Perspective Navigation with jQuery and CSS3 - MenuPuncher
• Responsive Fullscreen Navigation Menu with jQuery and CSS3
• Fullscreen Responsive Menu with jQuery and CSS3 - hamburgler.js
• Flexible Fullscreen Navigation Menu with jQuery and CSS3
• jQuery Plugin For Responsive Fullscreen Navigation Menu - Full Screen Nav

How to use it:

1. Include the jQuery menuFullpage plugin's CSS in the head section of the document.

<link href="css/menufullpage.css" rel="stylesheet">

2. Create a link to toggle the fullscreen navigation.

<a href="#menu" class="menu-link">
  <span>toggle menu</span>
</a>

3. Create the Html for the fullscreen navigation.

<nav id="menu" class="panel" role="navigation">
  <ul>
    <li><a data-scroll href="#">Home</a></li>
    <li><a data-scroll href="#">Portofolio</a></li>
    <li><a data-scroll href="#">Blog</a></li>
    <li><a data-scroll href="#">contact</a></li>
    <li><a data-scroll href="#">About</a></li>
  </ul>
</nav>

4. Enable the smooth scroll on your webpage.

smoothScroll.init();

5. Call the function to enable the fullscreen navigation.

$(document).ready(function() {
  $('.menu-link').menuFullpage();
});

6. Options and defaults.

$('.menu-link').menuFullpage({
menu:"#menu",
push:".push",
side:"left",
menuWidth:"100%",
speed:"600",
activeBtn:"menu-open"
});

---

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