Categories
Plugins

jquery.secretnav

Got something to say? let’s get in touch: @jachinte. Please let me know if you’re using SecretNav, it’s always nice to see what you’re using it for!

jQuery.SecretNav

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.
This plugin has been inspired by the amazing work done by the Codrops team, specifically by the effects presented in this article. The code is based in their initial implementation.

Install
The plugin requires jQuery 1.7 or higher. Install via npm, bower or download as a zip:
npm install jquery.secretnav
bower install jquery.secretnav
Demo
Live demonstration:

Left menu
Top menu

You can find the demo files in here.
Usage
Include the jQuery library, the SecretNav plugin and its CSS styles. These files can be found in the dist/ folder.
Then, initialize the plugin:
$( document ).ready(function() {    $( ‘#container’ ).SecretNav({    navSelector: ‘nav’,// selector of the nav tag        openSelector: ‘.open-menu’,// selector of the menu’s opener        position: ‘left’// left | top    });});
Your HTML should look similar to this:
     The content … Open menu 

    


AMD
SecretNav can also be used with require.js.
Theming
SecretNav comes with a basic styling. If you want to customize the appereance you can modify the styles in src/sass/jquery.secretnav.scss, and then re-run the grunt command to generate the distribution files again.
Contributing
You are invited to contribute code and suggestions to this project. The more the merrier.

GitHub Repo