Offcanvas（オフキャンバス）とは、皆さんご存知のiOSやAndroidなどのスマートフォンでは当たり前のように使っているもので、画面の横（左右）からスルッと飛び出してくるメニューのことで、今回はBootstrapにこのOffcanvasを付けたベーステンプレートを作成しました。

邪魔なメニューを隠すことによってコンテンツを多く表示したり、メーニューがある位置までスクロールしなくて良いため、スマホなどの画面が狭い端末では特に有効で、”スライドメニュー“や”ドロワーメニュー“と呼ぶこともあります。

Offcanvas + Bootstrap

ベースはBootstrapの公式サイトの”Offcanvas“をカスタマイズして作成しています。

Offcanvasの動作に必要なCSSとJavaScriptはCDN化しました。
メニューの幅が気に入らなかったので変更しています。
スクロールしてもメニューが追従するようにし、ボタンを上部のナビゲーションバーに移動しました。
バージョン古めですが、以前作成したのがこちら。

一応、デモサイトもあります↓

Offcanvasを使ったBootstrapテンプレート

Bootstrapには他にも様々なサンプルが用意されているので、ぜひ試してみてください。
特にダッシュボードのテンプレートもオススメですよ！

今回の目的はベースのテンプレートを作ることですが、正直これだけではダサいと思っています。
最後に、メニューを表示する時のアニメーションがカッコイイ”Offcanvas Menu Effects“もあるので一緒に紹介しておきます。

Offcanvas Menu Effects デモサイト