【jQuery】スマホサイトにも使えそうなOff Canvas Infinity Push Mobile Navigation

【jQuery】レスポンシブには欠かせないドロワーメニュー系jQueryプラグイン10選でご紹介したOff Canvas Infinity Push Mobile Navigationの使い方です。スムーズなアニメーションでサイドからナビゲーションをスライドして表示してくれるプラグインです。

CSS・jQuery

jQuery本体は1.7以上

<!-- Basic stylesheet -->
<link rel="stylesheet" type="text/css" href="plugin/jquery.ma.infinitypush.css" />
<!-- Include js plugin -->
<script src="plugin/jquery.ma.infinitypush.js"></script>

HTML Markup

<nav id="primary-navigation">
<ul>
<li><a href="#">Link</a>
<ul>
<li><a href="#">Link</a>
<ul>
<li><a href="#">Link</a>
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</li>
<li><a href="#">Link</a>
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</nav>

プラグイン

<script type="text/javascript">
$(document).ready(function(){
$('#primary-navigation').infinitypush({
openingspeed: 300,
closingspeed: 300
});
});
</script>

オプション

offcanvas オフキャンバス
offcanvasspeed オフキャンバスのアニメーション
offcanvasleft オフキャンバスを左側に
openingspeed 開く時のアニメーション
closingspeed 閉じる時のアニメーション
pushdirectionleft プッシュ方向は右から左
spacing 間隔
autoScroll オートスクロール
scrollSpeed スクロールスピード
destroy ナビゲーションをリセット

ライセンスはMIT

 

【jQuery】スマホサイトにも使えそうなOff Canvas Infinity Push Mobile Navigation

  • LATEST
  • RELATED
  • POPULAR