まず、HTMLの構造を設定します。以下の例では、トグルボタンとサイドバーメニューのコンテンツを含むdiv要素を使用します。
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#sidebar">
Toggle Sidebar
</button>
<div class="offcanvas offcanvas-start" tabindex="-1" id="sidebar">
<div class="offcanvas-header">
<h5 class="offcanvas-title">Sidebar</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<!-- サイドバーメニューのコンテンツをここに追加 -->
</div>
</div>上記の例では、トグルボタンにdata-bs-toggle="offcanvas"属性を追加し、サイドバーメニューのコンテンツを含むdiv要素にoffcanvasクラスを追加しています。
次に、BootstrapのJavaScriptファイルを読み込む必要があります。以下のCDNリンクを使用して、BootstrapのJavaScriptファイルを読み込んでください。
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>これで、オフキャンバスサイドバーの基本的な構造が完成しました。ユーザーがトグルボタンをクリックすると、サイドバーメニューが表示されます。
追加のカスタマイズを行いたい場合は、Bootstrapの公式ドキュメントを参照することをおすすめします。さまざまなオプションやスタイルをカスタマイズするためのクラスや属性が提供されています。
以上が、Bootstrap 5を使用してオフキャンバスサイドバーを作成する方法です。この方法を使用すると、シンプルで簡単にサイドバーメニューを作成することができます。