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

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

サイトのキャプチャ

Slidebars
Slidebars -GitHub

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()
全てのサイドのコンテンツを閉じます。

top of page

©2017 coliss