Home 3D Push Menu Plugin That Slides Out An Off-canvas Navigation | jQuery.SecretNav

Push Menu Plugin That Slides Out An Off-canvas Navigation | jQuery.SecretNav

3D webcodeflow · September 17, 2022 · Comments off

SecretNav is a small jQuery push menu plugin that slides out of the navigation panel from the edge of the screen while pushing the main content away using a 3D perspective effect powered by CSS3.

This plugin has been inspired by the amazing work done by the Codrops team, specifically from the effects presented in this article. The code is based on its initial implementation.

How to make use of it:

Installation:

npm install jquery.secretnav

bower install jquery.secretnav

1. Include jQuery and Modernzr, then the SecretNav plugin and its CSS styles.

<script src="path/to/jquery.js"></script>
<script src="path/to/modernizr.js"></script>
<script src="path/to/jquery.secretnav.min.js"></script>
<link rel="stylesheet" type="text/css" href="path/to/jquery.secretnav.css" />

2. Then configure 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
    });
});

3. Your HTML should look similar to this:

<body>
    <div id="container"> The content ... <a class="open-menu">Open menu</a> </div>
    <nav>
        <a href="#">Link 1</a>
        ...
        <a href="#">Link n</a>
    </nav>
</body>

3d perspective push menu, jQuery.SecretNav Plugin/Github