オフキャンバスメニュー

---

オフキャンバスメニューとは、画面全体を右、もしくは左にスライドさせ画面外に隠れていたメニューを表示させる機能です。
この機能を使用するには、組み込みJSと合わせてacms.cssもしくはacms-admin.cssのどちらかを読み込む必要があります。

デフォルト設定

この機能の設定は、/js/config.jsの以下の箇所にあります。設定を変更する場合は、適用しているテーマ内にJavaScriptファイルを別途作成してください。詳しくは「組み込みJSについて：設定を編集する」を参照してください。

offcanvas     : {
    'fixedHeaderMark'  : '.js-offcanvas-header',
    'openBtnMark'      : '.js-offcanvas-btn',//offcanvasを開くボタンのクラス
    'openBtnRMark'     : '.js-offcanvas-btn-r',//offcanvasを右方向に開くボタンのクラス
    'openBtnLMark'     : '.js-offcanvas-btn-l',//offcanvasを左方向に開くボタンのクラス
    'closeBtnMark'     : '.js-offcanvas-close',//offcanvasを閉じるボタンのクラス
    'offcanvasMark'    : '.js-offcanvas',//offcanvasが適応されるエリアのクラス
    'breakpoint'       : 767, //max-widthで指定,'all'を指定すると全画面,
    'throttleTime'     : 100
}

---

---

使い方

オフキャンバスメニューを使用したHTMLの構造は例えば以下のようになります。

<ul class="js-offcanvas" id="offcanvas">
    <li><a href="#">メニュー</a></li>
    <li><a href="#">メニュー</a></li>
    <li><a href="#">メニュー</a></li>
    <li><a href="#">メニュー</a></li>
</ul>
<a class="js-offcanvas-btn js-offcanvas-btn-r" href="#offcanvas">メニューを表示</a>

まず、オフキャンバスメニューのコンテンツとして表示したいHTML要素に、offcanvasMarkで指定したセレクターを指定します。
（※画面幅がbreakpointで指定した値よりも数値が小さい場合はoffcanvasMarkで指定した範囲のHTMLが画面上に表示されなくなるので注意してください ）

さらに、js-offcanvas-btnのclass属性が適用された要素に対してdata-target属性もしくはhref属性に、オフキャンバスのコンテンツとして表示したいHTML要素のid名を指定する必要があります。

---