3D Perspective Push Menu Plugin For jQuery - SecretNav

3D Perspective Push Menu Plugin For jQuery - SecretNav
File Size: 686 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

SecretNav is a small jQuery push menu plugin that slides out an off-canvas navigation from the edge of the screen while pushing the main content away with a fancy CSS3 powered 3D perspective effect.

How to use it:

1. Include jQuery library and the jQuery SectetNav plugin's CSS and JS files on the html page.

<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="path/to/jquery.secretnav.js"></script>
<link rel="stylesheet" href="path/to/jquery.secretnav.css">

2. Load the custom build of Modernizr.js (csstransforms3d-shiv-cssclasses-prefixed-teststyles-testprop-testallprops-prefixes-domprefixes-load).

<script src="js/modernizr.custom.25376.js"></script>

3. Add a set of links to the navigation.

<nav id="nav">
  <a href="#">Home</a>
  <a href="#">Works</a>
  <a href="#">Services</a>
  <a href="#">Contact</a>
  <a href="#">About</a>
  <a href="#">Blog</a>
</nav>

4. Create a link to toggle the navigation.

<a href="#" class="open">Reveal The Menu</a>

5. Call the plugin on your content wrapper and specify the navigation & toggle link selectors.

$('#content').secretNav({
  navSelector: '#nav',
  openSelector: '.open'
});

6. Change the menu slide direction to 'top'.

$('#content').secretNav({
  navSelector: '#nav',
  openSelector: '.open',
  position: "top"
});

Change logs:

v0.1.8 (2015-08-31)

  • Fixed: modalview class doesn't get removed

v0.1.5 (2015-07-31)

  • Changed css values for better visual effects

v0.1.3 (2015-07-30)

  • Resolved issue with heights

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