オフキャンバスメニュー


オフキャンバスメニューとは、画面全体を右、もしくは左にスクロールさせ画面外に隠れていたメニューを表示させる機能です。
この機能を使用するには、組み込み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
}


fixedHeaderMark ここで指定したセレクターはposition:fixed;でも画面全体の動きに合わせて移動します。
openBtnMark ここで指定したセレクターをクリック/タッチすることでオフキャンバスメニューを出現させます。
openBtnRMark ここで指定したセレクターをクリック/タッチすることでオフキャンバスメニューを右から出現させます。
openBtnLMark ここで指定したセレクターをクリック/タッチすることでオフキャンバスメニューを左から出現させます。
closeBtnMark ここで指定したセレクターをクリック/タッチすることでオフキャンバスメニューを閉じます。
offcanvasMark ここで指定したセレクターがオフキャンバスメニュー内の項目になります。
breakpoint ここで指定した数字以下の場合にオフキャンバスを利用可能にします。デフォルトでは767px以下の場合にオフキャンバスを利用可能にします。'all'を指定している場合は全画面でオフキャンバスが有効になります。

使い方

オフキャンバスメニューを使用した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名を指定する必要があります。