3D Perspective Push Menu Plugin For jQuery - SecretNav
File Size: | 686 KB |
---|---|
Views Total: | 2762 |
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.