jQuery

【jQuery】軽量のプッシュメニュープラグインSecretNav

December 26, 2018

jQuery.SecretNavは、軽量のプッシュメニューjQueryプラグイン。ナビゲーションを画面の端からはみ出し、メインのコンテンツはCSS3のパワフルな3Dパースペクティブエフェクトで表示します。

Usage

jQuery、Modernzr、SecretNavプラグインとCSSスタイルをインクルード。

<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" />

プラグインを初期化

$( 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
    });
});

HTMLは次のようになります。

<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>

MIT