[JS]スクリプト初心者でも簡単！レスポンシブ対応のナビゲーションやコンテンツを横から表示するスクリプト -Slidebars

サイト構築 -JavaScript

Post on:2014年1月31日

sponsorsr

最近よく見かけるトレンドの一つ「Off Canvas」、コンテンツの横からナビゲーションやコンテンツをアニメーションでスライド表示するjQueryのプラグインを紹介します。

Slidebars
Slidebars -GitHub

Slidebarsのデモ
Slidebarsの使い方

Slidebarsのデモ

デモページ

デモでは上部に固定配置されたヘッダの左右のアイコンで、コンテンツをアニメーションで押しだして、両横からナビゲーションやコンテンツを表示します。
まずは、左上のアイコンをクリック。

デモページ：左からスライド

コンテンツ部分をクリックすると元に戻ります。右上のアイコンをクリックすると、右からスライドします。

デモページ：右からスライド

レスポンシブ対応なので、表示幅が狭いスマフォやタブレットでも利用できます。

デモページ：幅780pxで表示

Slidebarsの使い方

Step 1: 外部ファイル

当スタイルシートをhead内に、jquery.jsと当スクリプトを</body>の上に記述します。

<head>
  ...
  <link rel="stylesheet" href="slidebars.min.css">
<head>
<body>
  ...
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script src="slidebars.min.js"></script>
</body>

Step 2: Viewortの設定

スマフォやタブレットなどでもページが正確にレンダリングされるように、head内のmetaタグにViweportの設定を記述します。

<head>
  ...
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
</head>

Step 3: HTML（メインのコンテンツ）

両サイドからスライドするコンテンツ以外の全てを内包するdiv要素を配置します。

<div id="sb-site">
  <!-- メインのコンテンツ -->
</div>

Step 4: HTML（サイドのコンテンツ）

サイドのコンテンツは、メインのコンテンツの下に配置します。まずは、左のコンテンツから。

<div class="sb-slidebar sb-left">
  <!-- サイドのコンテンツ（左） -->
</div>

右にもコンテンツを配置する時は、classを変更して配置します。

<div class="sb-slidebar sb-right">
  <!-- サイドのコンテンツ（右） -->
</div>

Step 5: JavaScript

jquery.jsと当スクリプトの下に、スクリプトをセットします。

<script>
  (function($) {
    $(document).ready(function() {
      $.slidebars();
    });
  }) (jQuery);
</script>

コードの完成

ここまでのコードを全て記述すると、下記のようになります。

<!doctype html>
<html>
  <head>
    <title>Slidebars Basic Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <!-- Slidebars CSS -->
    <link rel="stylesheet" href="slidebars.min.css">
  </head>

  <body>
    <div id="sb-site">
      <!-- メインのコンテンツ -->
    </div>

    <div class="sb-slidebar sb-left">
      <!-- サイドのコンテンツ（左） -->
    </div>

    <div class="sb-slidebar sb-right">
      <!-- サイドのコンテンツ（右） -->
    </div>

    <!-- jQuery -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

    <!-- Slidebars -->
    <script src="slidebars.min.js"></script>
    <script>
      (function($) {
        $(document).ready(function() {
          $.slidebars();
        });
      }) (jQuery);
    </script>
  </body>
</html>

スクリプトのオプション

オプションではさまざまな操作を設定できます。
サイドをスライドさせた状態で、コンテンツをクリックすると閉じる設定はsiteCloseを使います。

<script>
  (function($) {
    $(document).ready(function() {
      $.slidebars({
        siteClose: true // true or false
      });
    });
  }) (jQuery);
</script>

これはデフォルトで「true」になっているので、クリックで閉じないようにするには「false」します。

サイドを開閉するボタンもスクリプトで設定できます。
「my-button」などのclassを付与したボタンをクリックすると、サイドのコンテンツがスライドします。

<script>
  (function($) {
    $(document).ready(function() {
      var mySlidebars = new $.slidebars();
      $('.my-button').on('click', function() {
        mySlidebars.open('left');
      });
      $('.my-other-button').on('click', function() {
        mySlidebars.toggle('right');
      });
      $('.my-third-button').click(mySlidebars.close);
    });
  }) (jQuery);
</script>

.open(side): 指定したサイドのコンテンツをスライドします。
.toggle(side): 指定したサイドのコンテンツのトグル。
.close(): 全てのサイドのコンテンツを閉じます。