【Bootstrap】ハンバーガーメニューが開かない。を解決！

レスポンシブデザインにかかせないハンバーガーメニュー。

それを簡単に実装できるのがBootstrapです。

テンプレートがありますので、それをHtmlに貼り付けるだけで実装できちゃいます。

しかし、貼り付けたのはいいものの、クリックしてもメニューが開かない、と困っていませんか？

今回はこれを解決するために、２つのことをチェックしてください。

チェックポイント

その１　コードの変更

data-bs-toggle="collapse"

data-bs-target="#navbarSupportedContent"

data-bs-toggle="dropdown"

まず貼り付けたハンバーガーメニューのテンプレートのクラス（class）に、上記のようなコードがある場合、 まず「bs」に着目してください。

※Bootstrapのバージョンによって無い場合もあります。

私の場合、この「bs」があると、ハンバーガーメニューは開きませんでした。

ですので「bs」を削除し、

data-toggle（他省略）

としてみください。

その2　jQueryやJSの読み込み

Bootstrapのコンポーネントの多くは、JavaScriptなどを使用する必要があります。

具体的にはjQuery、Popper.js、JavaScriptプラグインです。

</body>タグの直前にこの３つが読み込まれているか、確認しましょう。

詳しくはこちらを参考にしてください。
https://your-3d.com/howtouse-boostrap-for-beginner/

まとめ

ハンバーガーメニューがひらかないときは、

• コードのチェック
• ライブラリの読み込み

この確認をして修正を試みてください。

私自身の体験ですので、他の原因がある場合もありますので御了承くださいませ。

Bootstrapは、クラス（class）を変えるだけで、配置や色を変えることが来ますので、いろいろとアレンジしてみてください。

Bootstrap関連の記事も紹介しておきます↓