ブートストラップ3のサンプルレイアウトoffcanvasの設定方法

ブートストラップ3のサンプルレイアウトoffcanvasの設定方法をまとめました。

1)ファイルの入手
 
①ブートストラップの公式サイトから”source”版をダウンロード。
 
②”examples”フォルダ内に”offcanvas”フォルダ内があります。
 
2)ファイルの配置
 
index.html、offcanvas.js、offcanvas.cssをサーバー内に適宜配置します。
 
3)index.html内のインクルード設定
 
index.html内のCSS、JavaScript部分を自分の環境に合わせて修正します。
 
<link href=”../../dist/css/bootstrap.min.css” rel=”stylesheet”>
<link href=”offcanvas.css” rel=”stylesheet”>

<script src=”../../dist/js/bootstrap.min.js”></script>
<script src=”offcanvas.js”></script>
 
4)動作確認
 
ブラウザでアクセスし、下記を確認します。
 
・ウィンドウサイズを変化させるとカラムの構成が3カラム、2カラム、1カラムと自動で変更されること。
 
・ウィンドウサイズを小さくするとナビゲーションメニューが折りたたまれ、クリックするとドロップダウンで表示される事。
 
・ウィンドウサイズを小さくするとサイトヘッダー部に”Toggle nav”ボタンが表示され、クリックすると左右にスライドする事。
 
※”Toggle nav”ボタン
 
ブートストラップ3の標準機能以外が使われていて、下記部分が該当します。
 
①JavaScript

$(document).ready(function() {
  $('[data-toggle=offcanvas]').click(function() {
    $('.row-offcanvas').toggleClass('active');
  });
});

 
②HTMLの該当部分

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

 
③スタイルシート

@media screen and (max-width: 767px) {
  .row-offcanvas {
    position: relative;
    -webkit-transition: all 0.25s ease-out;
    -moz-transition: all 0.25s ease-out;
    transition: all 0.25s ease-out;
  }
  .row-offcanvas-right
  .sidebar-offcanvas {
    right: -50%; /* 6 columns */
  }
  .row-offcanvas-right.active {
    right: 50%; /* 6 columns */
  }
}

 
ウィンドウサイズを小さくすると、”Toggle nav”のボタン(data-toggle=”offcanvas”クラス)が表示され、クリックすると”row-offcanvas”クラスのスタイル設定に”active”が適用されたり、取り消されたりして、ウィンドウの位置がスライドします。

関連記事の目次

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です