Bootstrapをカスタマイズ！ページをスマホで表示した際に横からナビゲーションをスライドさせる -Bootstrap Offcanvas
Post on:2015年3月6日
sponsorsr
Bootstrapで実装したページをスマホなどの幅が狭いスクリーンで表示した際に、横からオフキャンバスのナビゲーションをアニメーションでスライド表示させるJSとCSSのパックを紹介します。
Bootstrap Offcanvasのデモ
スマホなどの表示サイズの幅が狭いスクリーンで表示した際には、右上にアイコンが表示され、それをタップするとナビゲーションが横からアニメーションでスライドします。
デモのアニメーション
ちなみに、Bootstrapの標準のオフキャンバスはこんな感じです。
Bootstrap Offcanvasの使い方
Step 1: 外部ファイル
当スタイルシートとスクリプトを外部ファイルとして記述します。
[html]
...
...
[/html]
Step 2: HTML
まずは、オフキャンバスのナビゲーションを開くボタン。
[html]
[/html]
ナビゲーションは、nav要素で配置します。
[html]
[/html]
Step 3: カスタマイズ
ナビゲーションのカスタマイズは、スタイルシートで簡単にできます。
[css]
$offcanvas-width: 250px !default; // ナビゲーションの幅
$offcanvas-animation-time: 0.15s !default; // エフェクトの時間
$offcanvas-toggle-background: #f8f8f8 !default; // トグルの背景のカラー
$offcanvas-toggle-bars-color: #000 !default; // トグルのアイコンバーのカラー
[/css]
sponsors
