jQuery

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

April 21, 2016
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ライセンス