Fullscreen Perspective Navigation with jQuery and CSS3 - MenuPuncher

MenuPuncher is a simple-to-use jQuery plugin used to display a responsive, fullscreen, perspective navigation menu for your mobile-compatible website / web app.

See also:

• Fullscreen Off-canvas Navigation with jQuery and CSS3
• 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. Load the jQuery MenuPuncher plugin's JS and CSS in the project.

<link href="menupuncher.css" rel="stylesheet" type="text/css">
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="menupuncher.js"></script>

2. Create a list of links for the navigation menu.

<ul id="menu">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Works</a></li>
  <li><a href="#">Services</a></li>
  <li><a href="#">Blog</a></li>
  <li><a href="#">Contact</a></li>
</ul>

3. Create a link to toggle the navigation menu.

<a href="#" class="pusher"> <span></span> <span></span> <span></span> </a>

4. Call the plugin on document ready.

$('#menu').menupuncher();    

5. Default settings to customize the fullscreen navigation menu.

color  : '#000000',
textcolor  : '#FFFFFF',
opacity  : '0.8',
hovercolor: '#FFF'

---

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