Slidebars.jsを使ってサイドバーやプッシュメニューエリアを表示する方法｜DAD UNION

Slidebars.jsを使ってサイドバーやプッシュメニューエリアを表示する方法をご紹介します。

Contents

Slidebars.jsを使ってサイドバーやプッシュメニューエリアを表示するCSS記述
Slidebars.jsを使ってサイドバーやプッシュメニューエリアを表示するHTML記述
Slidebars.jsを使ってサイドバーやプッシュメニューエリアを表示するJavaScriptの記述
slidebars.jsを使ってサイドバーやプッシュメニューエリアを表示するデモページ
ソース元：GitHun – adchsm / Slidebars

Slidebars.jsを使ってサイドバーやプッシュメニューエリアを表示するCSS記述

※slidebars.cssファイルを読み込みます。サイドバー以外のエリア（canvas=container）とサイドバーのエリア（off-canvas）のCSS記述です。必要に応じて変更して下さい。

<link rel="stylesheet" href="slidebars.css">
<style>
html, body {
  margin: 0;
}
h1{
  text-align: center;
  font-size: 20px;
  padding: 20px 0;
  width: 100%;
  line-height: 1.4em;
}
h4{
  padding-top: 15px;
}
[canvas=container],
[off-canvas] {
    padding: 10px 20px;
}
[off-canvas] {
    background-color: #8ED2DD;
}
[class*=js-] {
    cursor: pointer;
}
</style>

Slidebars.jsを使ってサイドバーやプッシュメニューエリアを表示するHTML記述

※サイドバー以外のエリア（canvas=”container”）とサイドバーのエリア（off-canvas=”slidebar-1 left reveal”、off-canvas=”slidebar-2 right shift”、off-canvas=”slidebar-3 top push”）を用意します。

    <div canvas="container">
      <h1>slidebars.jsを使ってサイドバーやプッシュメニューエリアを表示します。<br>以下のボタンをクリックしてみて下さい。</h1>


      <h4>左スライドバーコントロール</h4>

      <p>
        <button class="js-open-left-slidebar">左サイドバーオープン</button>
        <button class="js-close-left-slidebar">左サイドバークローズ</button>
        <button class="js-toggle-left-slidebar">左サイドバーオープン・クローズ切替</button>
      </p>

      <h4>右サイドバーのコントロール</h4>

      <p>
        <button class="js-open-right-slidebar">右サイドバーオープン</button>
        <button class="js-close-right-slidebar">右サイドバークローズ</button>
        <button class="js-toggle-right-slidebar">右サイドバーオープン・クローズ切替</button>
      </p>

      <h4>上部のスライドバー コントロール</h4>

      <p>
        <button class="js-open-top-slidebar">上サイドバーオープン</button>
        <button class="js-close-top-slidebar">上サイドバークローズ</button>
        <button class="js-toggle-top-slidebar">上サイドバーオープン・クローズ切替</button>
      </p>


    </div>


    <div off-canvas="slidebar-1 left reveal">
      <p>左サイドエリアを表示してます。</p>
    </div>

    <div off-canvas="slidebar-2 right shift">
      <p>右サイドエリアを表示してます。</p>
    </div>

    <div off-canvas="slidebar-3 top push">
      <p>上サイドエリアを表示してます。</p>
    </div>

Slidebars.jsを使ってサイドバーやプッシュメニューエリアを表示するJavaScriptの記述

※jquery.min.js（v1.12.2）、slidebars.jsファイルを読み込みます。サイドバーをオープンする場合「controller.open(‘サイドバーエリア’)」、クローズする場合「controller.close(‘サイドバーエリア’)」、オープン・クローズ切替表示する場合「controller.toggle(‘サイドバーエリア’)」を記述します。
} );

<script src="jquery.min.js"></script>
<script src="slidebars.js"></script>

<script type="text/javascript">
( function ( $ ) {
    // スライドバーの新しいインスタンスを作成
    var controller = new slidebars();

    // スライドバーの初期化
    controller.init();

    // 左スライドバーコントロール
    $( '.js-open-left-slidebar' ).on( 'click', function ( event ) {
        event.stopPropagation();
        controller.open( 'slidebar-1' );
    } );

    $( '.js-close-left-slidebar' ).on( 'click', function ( event ) {
        event.stopPropagation();
        controller.close( 'slidebar-1' );
    } );

    $( '.js-toggle-left-slidebar' ).on( 'click', function ( event ) {
        event.stopPropagation();
        controller.toggle( 'slidebar-1' );
    } );

    // 右スライドバーコントロール
    $( '.js-open-right-slidebar' ).on( 'click', function ( event ) {
        event.stopPropagation();
        controller.open( 'slidebar-2' );
    } );

    $( '.js-close-right-slidebar' ).on( 'click', function ( event ) {
        event.stopPropagation();
        controller.close( 'slidebar-2' );
    } );

    $( '.js-toggle-right-slidebar' ).on( 'click', function ( event ) {
        event.stopPropagation();
        controller.toggle( 'slidebar-2' );
    } );

    // 上部のスライドバー コントロール
    $( '.js-open-top-slidebar' ).on( 'click', function ( event ) {
        event.stopPropagation();
        controller.open( 'slidebar-3' );
    } );

    $( '.js-close-top-slidebar' ).on( 'click', function ( event ) {
        event.stopPropagation();
        controller.close( 'slidebar-3' );
    } );

    $( '.js-toggle-top-slidebar' ).on( 'click', function ( event ) {
        event.stopPropagation();
        controller.toggle( 'slidebar-3' );
    } );

} ) ( jQuery );
</script>