Offcanvas（オフキャンバス）とは、皆さんご存知のiOSやAndroidなどのスマートフォンでは当たり前のように使っているもので、画面の横（左右）からスルッと飛び出してくるメニューのことで、今回はBootstrapにこのOffcanvasを付けたベーステンプレートを作成しました。
邪魔なメニューを隠すことによってコンテンツを多く表示したり、メーニューがある位置までスクロールしなくて良いため、スマホなどの画面が狭い端末では特に有効で、”スライドメニュー“や”ドロワーメニュー“と呼ぶこともあります。
Offcanvas + Bootstrap
ベースはBootstrapの公式サイトの”Offcanvas“をカスタマイズして作成しています。
Offcanvasの動作に必要なCSSとJavaScriptはCDN化しました。
メニューの幅が気に入らなかったので変更しています。
スクロールしてもメニューが追従するようにし、ボタンを上部のナビゲーションバーに移動しました。
バージョン古めですが、以前作成したのがこちら。
一応、デモサイトもあります↓
Offcanvasを使ったBootstrapテンプレート
Bootstrapには他にも様々なサンプルが用意されているので、ぜひ試してみてください。
特にダッシュボードのテンプレートもオススメですよ！
今回の目的はベースのテンプレートを作ることですが、正直これだけではダサいと思っています。
最後に、メニューを表示する時のアニメーションがカッコイイ”Offcanvas Menu Effects“もあるので一緒に紹介しておきます。
Offcanvas Menu Effects デモサイト
- Original:https://minory.org/offcanvas-bootstrap.html
- Source:Minory
- Author:管理者