【jQuery】オフスクリーンスライドパネルのナビゲーションプラグイン。bigSlide.js

【jQuery】レスポンシブには欠かせないドロワーメニュー系jQueryプラグイン10選でご紹介したbigSlide.jsについてです。bigSlide.jsはオフスクリーンスライドパネルのナビゲーションを作成するための軽量のjQueryプラグインです。
ナビゲーションパネルだけでなく、与えられた任意のコンテナにスライドします。

HTML

ナビゲーショントリガー

<a href="#menu" class="menu-link">&#9776;</a>

メニュー

<nav id="menu" class="panel" role="navigation">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">The Ballad of El Goodo</a></li>
<li><a href="#">Thirteen</a></li>
<li><a href="#">September Gurls</a></li>
<li><a href="#">What's Going Ahn</a></li>
</ul>
</nav>

jQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="jquery.big-slide.js"></script>

プラグインを初期化

<script>
$(document).ready(function() {
$('.menu-link').bigSlide();
});
</script>

オプション

menu ナビゲーションメニューの属性ID
push トリガーを押した時に追加要素に与えらるクラス
side ナビゲーションメニュー(「右」または「左」のいずれか)のスライド
menuWidth ナビゲーションメニューの幅
speed ナビゲーションメニューの(ミリ秒)の速度
easyClose ユーザーが任意のクリックでメニューを閉じることができるように切り替えをするには、これをtrueに設定

負荷のメニューのフラッシュを防止するためCSSを追加。

.panel {
position: fixed;
left: -15.625em; /*left or right and the width of your navigation panel*/
width: 15.625em; /*should match the above value*/
}

.pushクラスを使用するすべての要素が相対的に配置

.wrap {
position: relative;
}

MITライセンス

 
bigslide.js

【jQuery】オフスクリーンスライドパネルのナビゲーションプラグイン。bigSlide.js

  • LATEST
  • RELATED
  • POPULAR