Bootstrapをカスタマイズ！ページをスマホで表示した際に横からナビゲーションをスライドさせる -Bootstrap Offcanvas

サイト構築 -制作

Post on:2015年3月6日

Bootstrap Offcanvasのデモ

デモページ

スマホなどの表示サイズの幅が狭いスクリーンで表示した際には、右上にアイコンが表示され、それをタップするとナビゲーションが横からアニメーションでスライドします。

デモのアニメーション

ちなみに、Bootstrapの標準のオフキャンバスはこんな感じです。

Off Canvas -Bootstrap

Bootstrap Offcanvasの使い方

Step 1: 外部ファイル

当スタイルシートとスクリプトを外部ファイルとして記述します。

<head>
  ...
  <link rel="stylesheet" href="../dist/css/bootstrap.offcanvas.min.css"/>
</head>
<body>
  ...
  <script src="../dist/js/bootstrap.offcanvas.js"></script>
</body>

Step 2: HTML

まずは、オフキャンバスのナビゲーションを開くボタン。

<button type="button" class="navbar-toggle offcanvas-toggle" data-toggle="offcanvas" data-target="#js-bootstrap-offcanvas">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
</button>

ナビゲーションは、nav要素で配置します。

<nav class="navbar navbar-default navbar-offcanvas" role="navigation" id="js-bootstrap-offcanvas">
    ...
</nav>

Step 3: カスタマイズ

ナビゲーションのカスタマイズは、スタイルシートで簡単にできます。

$offcanvas-width: 250px !default; // ナビゲーションの幅
$offcanvas-animation-time: 0.15s !default; // エフェクトの時間
$offcanvas-toggle-background: #f8f8f8 !default; // トグルの背景のカラー
$offcanvas-toggle-bars-color: #000 !default; // トグルのアイコンバーのカラー