Bootstrapでoffcanvasメニューを作る方法

Pocket

offcanvasとは、主にスマートフォンなどのモバイルデバイスでwebサイトにアクセスした際に使えるメニュー機能のこと。Bootstrapのコンポーネントではドロップダウンナビが用意されてますが、実はoffcanvasを使うこともできます。

Bootstrapを使ったoffcanvasの作り方

Bootstrapのソースコードをダウンロード

Bootstrapのダウンロードは必要なものだけがまとめられたファイルと、開発用ファイルも含まれるソースコードダウンロードがあります。offcanvasのコードはそちらに用意されているので、ここではソースコードをダウンロードします。
Bootstrapのソースコード
bootstra-source

offcanvasのサンプルコードをチェック

Bootstrapのソースコードをダウンロードして解凍したら、docs -> examples を開いてみます。その中にあるoffcanvasフォルダのindex.htmlを開いてみると以下の画像のようなoffcanvas機能がすでに実装されています
Off_Canvas_Template_for_Bootstrap

サンプルデモをさらにシンプルにしたものがこちら。

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Off Canvas Demo</title>

    <!-- Bootstrap core CSS -->
    <link href="../../dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="offcanvas.css" rel="stylesheet">
  </head>
  <body>

    <div class="container">
      <div class="row row-offcanvas row-offcanvas-right">

        <div class="col-xs-12 col-sm-9">
          <p class="pull-right visible-xs">
            <button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas">Toggle nav</button>
          </p>
          <div class="jumbotron">
            <h1>Off Canvas Demo</h1>
            <p>This is an example to show the potential of an offcanvas layout pattern in Bootstrap. Try some responsive-range viewport sizes to see it in action.</p>
          </div>
        </div><!--/.col-xs-12.col-sm-9-->

        <div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation">
          <div class="list-group">
            <a href="#" class="list-group-item active">Link</a>
            <a href="#" class="list-group-item">Link</a>
            <a href="#" class="list-group-item">Link</a>
            <a href="#" class="list-group-item">Link</a>
          </div>
        </div><!--/.sidebar-offcanvas-->

      </div><!--/row-->
    </div><!--/.container-->

    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="../../dist/js/bootstrap.min.js"></script>

    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>

    <script src="offcanvas.js"></script>
  </body>
</html>

offcanvasの使い方

offcanvasの使い方はすごく簡単。サンプルで用意されているCSSとjavascriptファイルを読み込んで、特定のclass名をつけるだけで使用できます。

offcanvasを実装するには、メインコンテンツとoffcanvasで使用するコンテンツを.row.row-offcanvas.row-offcanvas-rightで囲むだけ。表示の左右入れ替えは、.row-offcanvas-right.row-offcanvas-leftにすればOKです。

index.html

<div class="row row-offcanvas row-offcanvas-right">

  <div class="col-xs-12 col-sm-9">

    <!-- メインコンテンツ -->

  </div><!--/.col-xs-12.col-sm-9-->

  <div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation">

    <!-- offcanvasで表示するコンテンツ -->

  </div><!--/.sidebar-offcanvas-->

</div><!--/row-->

メインコンテンツを全体に表示し、offcanvasのコンテンツをモバイルサイズのみで表示したい場合は、.col-sm-xxを削除して、.visible-xsでモバイルサイズのみ表示にすればOK。

index.html

<div class="row row-offcanvas row-offcanvas-right">

  <div class="col-xs-12">

    <!-- メインコンテンツ -->

  </div><!--/.col-xs-12-->

  <div class="col-xs-6 visible-xs sidebar-offcanvas" id="sidebar" role="navigation">

    <!-- offcanvasで表示するコンテンツ、モバイルサイズのみで表示 -->

  </div><!--/.sidebar-offcanvas-->

</div><!--/row-->

このままだと少しかっこ悪いですが、スタイルを修正すれば以下のようなクールなoffcanvasにすることも可能。是非挑戦してみて下さい。
bootstrapでoffcanvasを作る方法