JavaScript

Slidebars.jsを使って簡単にサイドバーとプッシュメニューを実装する方法【初心者ガイド】

  /

Webサイトのナビゲーションやメニュー表示に欠かせないサイドバー。この記事では、シンプルで柔軟なjQueryプラグイン「Slidebars.js」を使って、サイドバーやプッシュメニューエリアを簡単に実装する方法を紹介します。初心者の方でもわかりやすく解説しますので、ぜひチャレンジしてみてください！

Contents

Slidebars.jsとは？

Slidebars.jsは、レスポンシブ対応のサイドバーメニューを手軽に実装できる軽量なjQueryプラグインです。左右や上下にスライドするメニューを簡単に作成でき、ユーザーに快適なナビゲーション体験を提供します。

必要なファイルを準備

まずは、Slidebars.jsを使用するために必要なファイルを用意しましょう。必要なファイルは以下の通りです。

  • slidebars.css
  • jquery.min.js (v1.12.2)
  • slidebars.js

　
これらのファイルをプロジェクトに追加します。

CSSの設定

slidebars.cssファイルを読み込みます。以下は、Slidebars.jsを使用する際の基本的なCSS設定です。サイドバーエリア（off-canvas）とメインコンテンツエリア（canvas=container）のスタイルを定義します。

<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>

HTMLの設定

次に、HTMLを設定します。以下のコードを使用して、サイドバー（off-canvas=”slidebar-1 left reveal”、off-canvas=”slidebar-2 right shift”、off-canvas=”slidebar-3 top push”）とメインコンテンツ（canvas=”container”）の構造を作成します。

    <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>

JavaScriptの設定

最後に、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>

slidebars.jsを使ってサイドバーやプッシュメニューエリアを表示するデモページ

このコードを使って、Slidebars.jsのデモページで動作を確認できます。以下のリンクからデモページをチェックしてください。

slidebars.jsを使ってサイドバーやプッシュメニューエリアを表示するデモページ

ソース元：GitHun – adchsm / Slidebars

Slidebars.jsの詳細な情報は以下のGitHubリポジトリから確認できます。

GitHun – adchsm / Slidebars.js

まとめ

Slidebars.jsを使用することで、手軽にサイドバーやプッシュメニューを実装することができます。デザインの自由度も高く、レスポンシブ対応も容易です。今回のガイドを参考に、ぜひあなたのプロジェクトに導入してみてください。

　
※流用される場合は自己責任でお願いします。
　デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。

Slidebars.js サイドバー プッシュメニューエリア
関連記事