はじめに
Bootstrap(version v5.0.2)を使用して、公式サイトを参考にナビゲーションメニューを実装しました。
公式のイントロダクションに記載がある通りレスポンシブ用metaタグを追加し、
HTML
<meta name="viewport" content="width=device-width, initial-scale=1" />
画面幅が小さくなると自動的にハンバーガーメニューの表示になるものの、
ハンバーガーメニューのアイコンをクリックしてもメニューが開かない・・・。
原因を調査してHTMLファイルを修正しました。
原因
ハンバーガーメニューの実装に必要なjsライブラリ(jQuery)やpopper.jsを読み込んでいないことが原因でした。公式のイントロダクションにもこれらの読み込みが必要との記載がありました。
解決法
下記コードを </body> タグの直前に記述しました。
HTML
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
必要なファイルをCDNで読み込んでいます。
公式のイントロダクションに記載がある方法（BundleとSeparate)で試したところ動かず、こちらのサイトを参考にして記述したところ無事動きました。