2022年8月1日URLをコピーしました!Offcanvas(オフキャンバス)とは、皆さんご存知のiOSやAndroidなどのスマートフォンでは当たり前のように使っているもので、画面の横(左右)からスルッと飛び出してくるメニューのことで、今回はBootstrapにこのOffcanvasを付けたベーステンプレートを作成しました。邪魔なメニューを隠すことによってコンテンツを多く表示したり、メーニューがある位置までスクロールしなくて良いため、スマホなどの画面が狭い端末では特に有効で、”スライドメニュー“や”ドロワーメニュー“と呼ぶこともあります。BootstrapベースはBootstrapの公式サイトの”Offcanvas“をカスタマイズして作成しています。plugin.Offcanvasの動作に必要なCSSとJavaScriptはCDN化しました。メニューの幅が気に入らなかったので変更しています。スクロールしてもメニューが追従するようにし、ボタンを上部のナビゲーションバーに移動しました。バージョン古めですが、以前作成したのがこちら。BootstrapOffcanvasを使ったBootstrapテンプレートBootstrapには他にも様々なサンプルが用意されているので、ぜひ試してみてください。ダッシュボードのテンプレートもオススメですよ!今回の目的はベースのテンプレートを作ることですが、正直これだけではダサいと思っています。Effects“もあるので一緒に紹介しておきます。※サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。上に表示された文字を入力してください。閉じるホーム画面に追加してください!。